ES6新增语法之二

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 的理解更上一层楼。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,045评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,114评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,120评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,902评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,828评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,132评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,590评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,258评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,408评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,068评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,660评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2 341

推荐阅读更多精彩内容

  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,689评论 1 56
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,348评论 0 19
  • 一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...
    Alex灌汤猫阅读 816评论 0 2
  • 距离上次写博客已经记不清楚是多久啦!就在今天16年7月1号一个好基友突然说项目急用一个变色的loading,刚好下...
    qingwenLi阅读 606评论 4 7
  • 来自真我之爱的一封情书 亲爱的,当你看到这封信,我希望你知道,你是如何被深爱着的。 如果有一份爱,超越...
    新心园阅读 376评论 0 0