美文网首页
ES6新增语法之二

ES6新增语法之二

作者: 叶苏芒 | 来源:发表于2019-03-03 22:50 被阅读0次

    1、Promise的涵义

    promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现,ES6将其写进了语言标准,统一了用法,并原生提供了Promise对象。

    所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上来说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

    Promise对象有以下两个特点:

    1、对象的状态不受外界影响。Promise对象代表一个异步操作,有3种状态:Penging(进行中)、Fulfilled(已成功)和Reject(已失效)。只有异步操作的结果可以决定当前是哪一种状态,任何其它操作都无法改变这个状态。这也是“Promise”这个名字的由来,它在英语中意思是“承诺”,表示其它手段无法改变。

    2、一旦状态改变就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能:从pending变为Fulfilled和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变,而是一直保持这个结果,这时就称为Resolved(已定型)。就算改变已经发生,再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同。事件的特点是,如果错过了它,再去监听是得不到结果的。(为了行文方便,本章后面的Resolved统一指Fulfilled状态,不包含Rejected状态。)

    有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

    Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误不会反应到外部。再者,当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

    如果某些事件不断地反复发生,一般来说,使用Stream模式(nodejs.org/api/stream.html)是比部署Promise更好的选择。

    2、promise的基本用法

    ES6规定,Promise对象是一个构造函数,用来生成Promise实例

    let promise = new Promise(function(resolve,reject){

        console.log('Promise');

        resolve();

    });

    promise.then(function(){

        console.log('Resolved.');

    });

    console.log('Hi!');

    //Promise

    //Hi!

    //Resolved

    注释:上面的代码中,Promise新建后会立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数将在当前脚本所有同步任务执行完成后才会执行,所以Resolved最后输出。

    解说:Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供,不用自己部署。

    resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误作为参数传递出去。

    Promise实例生成以后,可以用then方法分别指定Resolved状态和Rejected状态的回调函数。

    var   p1=new Promise(function (resolve,reject){

         setTimeout(()=>reject(new Error('fail')),3000)

    })

    var p2 = new Promise(function (resolve,reject){

         setTimeout(() = > resolve(p1),1000)

    })

    p2

           .then(result = > console.log(result))

            .catch(error = >console.log(error))

    //  Error:fail

    上面的代码中,p1是一个Promise,3秒之后变为rejected。p2的状态在1秒之后改变,resolve方法返回的是p1。由于p2返回的是另一个Promise,导致p2的状态无效,由p1的状态决定p2的状态。所以,后面的then语句都变成针对后者(p1)的。再过2秒,p1变为rejected,触发catch方法指定的回调函数。

    new Promise((resolve,reject)=>{

            resolve(1);

            console.log(2);

    }).then(r = > {

            console.log(r);

    });

    //  2

    //  1

    上面的代码中,调用resolve(1)以后,后面的console.log(2)还是会执行,并且会首先打印出来。这是因为立即resolved的Promise是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。

    3、Promise.prototype.then()

    Promise实例具有then方法,即then方法是定义在原型对象Promise.prototype上的。它的作用是为Promise实例添加状态改变时的回调函数。then方法的第一个参数是Resolved状态的回调函数,第二个参数(可选)是Rejected状态的回调函数。

    then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

    4、Promise.prototype.catch()

    Promise.prototype.catch方法是.then(null,rejection)的别名,用于指定发生错误时的回调函数。

    //bad

    promise

                .then(function(data){

                    //success

                    },function(err){

                     //error

                    ));

    //good

    promise

                .then(function(data){

                     // success

                   })

                   .catch(function(err){

                       //error

                    });

    简析:第二种写法要好过第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议使用catch方法,而不使用then方法的第二个参数。

    跟传统的try/catch代码块不同的是,如果没有使用catch方法指定错误处理的回调函数,Promise对象抛出的错误不会传递到外层代码,即不会有任何反应。

    5、Promise.all()

    Promise.all方法用于将多个Promise实例包装成一个新的Promise实例。

    var p = Promise.all([p1,p2,p3]);

    p的状态由p1,p2,p3决定,分成两种情况。

    1、只有p1,p2,p3的状态都变成Fulfilled,p的状态才会变成Fulfilled,此时p1,p2,p3的返回值组成一个数组,传递给p的回调函数。

    2、只要p1,p2,p3中有一个被Reject,p的状态就变成Reject,此时第一个被Reject的实例的返回值会传递给p的回调函数。

    6、Promise.race()

    Promise.race方法同样是将多个Promise实例包装成一个新的Promise实例。

    var  p = Promise.race([p1,p2,p3]);

    上述代码中,只要p1,p2,p3中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值就传递给p的回调函数。

    7、Promise.resolve()

    有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用。

    var  jsPromise=Promise.resolve($.ajax('/whatever.json'));

    8、Promise.reject()

    Promise.reject(reason)方法也会返回一个新的Promise实例,状态为Rejected。

    var p = Promise.reject('出错了');

    9、两个有用的附加方法

    (1)done()

    无论Promise对象的回调链以then方法还是catch方法结尾,只要最后一个方法抛出错误,都有可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)。为此,我们可以提供一个done方法,它总是处于回调链的尾端,保证抛出任何可能出现的错误。

    asyncFunc()

              .then(f1)

              .catch(r1)

              .then(f2)

              .done();

    (3)finally()

    finally方法用于指定不管Promise对象最后状态如何都会执行的操作。它与done方法的最大区别在于,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。

    实现一个简易版 Promise

    在完成符合 Promise/A+ 规范的代码之前,我们可以先来实现一个简易版 Promise,因为在面试中,如果你能实现出一个简易版的 Promise 基本可以过关了。

    (1)那么我们先来搭建构建函数的大体框架

    *首先我们创建了三个常量用于表示状态,对于经常使用的一些值都应该通过常量来管理,便于开发及后期维护

    *在函数体内部首先创建了常量 that,因为代码可能会异步执行,用于获取正确的 this 对象

    *一开始 Promise 的状态应该是 pending

    *value 变量用于保存 resolve 或者 reject 中传入的值

    *resolvedCallbacks 和 rejectedCallbacks 用于保存 then 中的回调,因为当执行完 Promise 时状态可能还是等待中,这时候应该把 then 中的回调保存起来用于状态改变时使用

    (2)接下来我们来完善 resolve 和 reject 函数,添加在 MyPromise 函数体内部

    这两个函数代码类似,就一起解析了

    *首先两个函数都得判断当前状态是否为等待中,因为规范规定只有等待态才可以改变状态

    *将当前状态更改为对应状态,并且将传入的值赋值给 value

    *遍历回调数组并执行

    (3)完成以上两个函数以后,我们就该实现如何执行 Promise 中传入的函数了

    *实现很简单,执行传入的参数并且将之前两个函数当做参数传进去

    *要注意的是,可能执行函数过程中会遇到错误,需要捕获错误并且执行 reject 函数

    (4)最后我们来实现较为复杂的 then 函数

    *首先判断两个参数是否为函数类型,因为这两个参数是可选参数

    *当参数不是函数类型时,需要创建一个函数赋值给对应的参数,同时也实现了透传,比如如下代码

    *接下来就是一系列判断状态的逻辑,当状态不是等待态时,就去执行相对应的函数。如果状态是等待态的话,就往回调函数中 push 函数,比如如下代码就会进入等待态的逻辑

    以上就是简单版 Promise 实现,接下来一小节是实现完整版 Promise 的解析,相信看完完整版的你,一定会对于 Promise 的理解更上一层楼。

    相关文章

      网友评论

          本文标题:ES6新增语法之二

          本文链接:https://www.haomeiwen.com/subject/hxqmuqtx.html