Promise

ES6 新特性三

ES6的Promise、Generators等新特性快速使用

2018-06-07侠课岛    基础入门       

前端/前端必修/es6新特性体验 16     0     2645

Promise

相信大家对异步编程都不陌生,在ES6的promise之前,用回调函数的方法也可以实现,但回调函数层层嵌套的写法让人非常头痛,尤其是遇到嵌套层数过多的时候,也就是我们所说的回调地狱啦~最常见的情况就是我们需要依次请求多个接口,并且依赖上一个请求返回的数据来进行下一步操作这种情况啦~所以promise出来之后,我们果断投入promise的怀抱~
promise包括三个状态:pending即初始状态,fullfilled即成功状态,reject即失败状态,不过这个三个状态只是为了理解promise的流程,真正在写的时候,我们需要记住的是resolvereject这两个关键字,分别表示成功状态的返回,和失败状态的返回。
在使用promise时候,我们采用链式写法,then对应成功的回调,catch对应失败的回调。在链式调用的时候,then里面调用的方法返回的数据,可以被下一个then继续调用,从而形成promise里面数据的流动。 下面是一个关于promise的例子

let foo = function(flag){
    return new Promise(function(resolve,reject){
        if(flag){
            resolve('flag==true');  //promise进入成功状态
        }else{
            reject('flag==false');  //promise进入失败状态
        } 
    })
}

foo(true).then(res=>{
    console.log(res);    // 'flag==true'
    return res;         //返回数据 可被下一个then接收到
}).then(res=>{
    console.log(res);   //'flag==true'
}).catch(error=>{
    console.log(error);  //这里只有当promise状态为reject的时候才会被调用
})

除了基础的promise,它还提供一个all的方法,用来处理多个promise的情况,比如你需要几个接口都返回数据之后再进行下一步,但这些接口是并行的,这种情况下,使用all就比使用链式的调用要合适。
它接受一个promise对象组合成的数组做为参数,返回的也是一个数组,与传入的promise对象的顺序一一对应。需要注意的是,promise.all()里面的promise对象是同时执行的,并没有依次执行,如果想要达到执行完一个之后再执行另一个的效果,就需要自己重新封装方法啦。

let foo = function(data){
    return new Promise((resolve,reject)=>{
        setTimeout(resolve,100,data);
    });
}

Promise.all([foo('hello'),foo('world'),foo('!')]).then(res=>{
 console.log(res);   //["hello", "world", "!"]
});

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

16

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?