深入理解es6的promise

一、promise入门

 1. Promise对象是什么

回调函数的另一种原生实现,比之前回调函数的写法机构清晰,功能强大,

2.以前回调这么写

function a(fn){
    let h = 1;
    setTimeout(function(){
        if(h==1){
            fn(h)
        }else{
            throw Error('error!')
        }
    },1000)
}
//调用
a(function(m){
    console.log(m+'callback')
})

3.用Promise 写回调

 function a(){
     return new Promise(function(resole,reject){
         setTimeout(function(){
             if(h==1){
                 resole(h)
             }else{
                 reject(error)
             }
         },1000)
     })
 }
//调用
a().then(function(data){
    console.log(data)
},function(err){
    console.log(err)
})

4.多层回调实现

//函数封装
function fn(n,callback){
 setTimeout(function(){
     callback(n)
 },1000)
}
function fn2(m,callback){

   setTimeout(function(){
       callback(m)
   },800)
}
function fn3(h,callback){
    setTimeout(function(){
           callback(h)
   },600)
}
//多层回调调用

fn(1, function(n){
                
    console.log('fn='+n);
    fn2(2,function(n2){
        
        console.log('fn2='+n2);
        fn3(3,function(n3){
            
            console.log('fn3='+n3)
            console.log('end')
        })
    })
}); 

可见(1)中多层回调写起来很乱,不利于维护,下面用Promise实现

function pm(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}
function pm2(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}
function pm3(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}

//调用
pm(1).then(function(data){
    console.log('pm='+data);
    return pm2(2)
    
}).then(function(data){
    console.log('pm2='+data);
    return pm3(3)
    
}).then(function(data){
    console.log('pm3='+data);
    
})

用promise调用的写法更加直观

二、Generator

1.Generator函数

(1)异步编程思想来写同步代码
(2)遍历器生成函数
(3)状态机,封装了多个内部状态。

2.形式

function* abc(){
    //yield 非必须,return 也非必须;
    yield 'a';
    yield 'b';
    return 'c'
}
//调用
var h = abc();
h.next();//{value:'a',done:false}
h.next();//{value:'b',done:false}
h.next();//{value:'c',done:true}
h.next();//{value:undefined,done:true}

3.把Promise用Generator函数表示

function pm(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
        resolve()
        },1000)    
    })
    
    
    
}
function pm2(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },800)    
    })
}
function pm3(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },600)    
    })
}

function* gPm(){
    yield pm(1);
    yield pm2(2);
    yield pm3(3);
}
let p = gPm();
p.next().value.then(function(){
    p.next().value.then(function(){
        p.next().value.then(function(){
        
        })
    })
})

在调用的时候用Generator函数;代码更加同步化

三、async/await

1. async/await是什么

(1)异步操作的终极解决方案

2. 写法

function pm(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
        resolve()
        },1000)    
    })
    
    
    
}
function pm2(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },800)    
    })
}
function pm3(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },600)    
    })
}

async function p(){
    await pm(1)
    await pm2(2)
    await pm3(3)
}
p()

四、总结

不管用then还是用generator 还是用async,都保证你写的function 的返回值是一个**promise**对象

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=f12524hxoqvv

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go-指针、传值与传引用、垃圾回收

要点 Go使用的*、&、new()这些运算符,和C++的用法完全一样。 有传值和传引用/传地址的概念,和C++一样。 Go没有new对应的delete操作,而是...

3325
来自专栏WindCoder

mybatis在xml文件中处理大于号小于号的方法(mybatis大于小于的转义)

SELECT * FROM test WHERE 1 = 1 AND start_date  <= CURRENT_DATE AND end_date &...

1301
来自专栏菜鸟计划

vue组件详解(二)——使用props传递数据

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是...

1K8
来自专栏前端知识分享

第22天:js改变样式效果

1、alert:弹出警示框(用的非常少,用户体验不好) 完整写法:window.alert(“执行语句”); window对象,窗口,一般情况可省略 alert...

1301
来自专栏Golang语言社区

go 切片使用小结

最新项目使用go语言开发,因此有机会结识了go语言。在写代码时,无意间发现了同事代码的一个bug。今天拿来一起学习一下。 首先go语言有个强大的基本数据结构,那...

3408
来自专栏NetCore

struts技术的logic标签

struts技术的logic标签-- - 开源项目最好的是可以让我们从项目的源码本身角度看项目,通过对源码的了解更多的是对设计思想融会贯通达提升整体能力的目的。...

1888
来自专栏十月梦想

Vue入门详解之模板语法插值表达式,v-html和v-text

我们来看一下简单的模板语法,在Vue中有三种模板语法用来渲染model(数据层),插值表达式(就是{{}},双花括号表达法),v-text和v-html三种!那...

4813
来自专栏Golang语言社区

Go-指针、传值与传引用、垃圾回收

要点 Go使用的*、&、new()这些运算符,和C++的用法完全一样。 有传值和传引用/传地址的概念,和C++一样。 Go没有new对应的delete操作,而是...

36610
来自专栏Android先生

Android开发人员不得不学习的JavaScript基础(二)

window对象是BOM的核心,window对象指当前的浏览器窗口,window对象中有很多种方法供开发者调用:

1093
来自专栏与神兽党一起成长

unslider源码分析

根据Bootstrap中文网的介绍,Unslider一个超小的 jQuery轮播(slider)插件,参照这个汉化版的介绍页面,这个插件有你需要的优点,但是本...

2092

扫码关注云+社区

领取腾讯云代金券