当前位置 博文首页 > 前端开发博客:一道让人失眠的 Promise 试题深入分析
▲?点击下方“前端开发博客”关注公众号
回复“答案”查阅?JS最新一题
先把罪魁祸首挂在这里给大家群殴?????
Promise.resolve().then(()?=>?{
????console.log(0);
????return?Promise.resolve(4);
}).then((res)?=>?{
????console.log(res)
})
Promise.resolve().then(()?=>?{
????console.log(1);
}).then(()?=>?{
????console.log(2);
}).then(()?=>?{
????console.log(3);
}).then(()?=>?{
????console.log(5);
}).then(()?=>{
????console.log(6);
})
//?大家先思考一下
这道面试题是无意间在微信群里看到的,据说是某厂的面试题。一般关于 Promise 的面试题无非是考察宏微任务、EventLoop 之类的,当我认真去分析这道题的时候,越看越不对劲,感觉有诈!这是要考察啥?
不管了,先在浏览器输出一下看看 ????
打印结果:0、1、2、3、4、5、6?????
这里4怎么跑到3后面去了,不讲武德? Why......
在我看来,这道题有两个?Promise.resolve()
,相当于创建两个状态为 fulfilled 的 Promise。
紧随他们后面的第一个 then 方法会交替将其执行函数送入微任务队列排队执行,所以这里的0和1,大家都可以理解,但是接下来执行的不是?console.log(res)
?而是?console.log(2)
。
如果说需要等待?return Promise.resolve(4)
?执行完并将其结果和状态同步给外部的 Promise,那么这里只需要创建一个微任务去处理就应该可以了,也就是 4 会在 2 后面才对,为啥需要创建两个微任务呢? ????
想了很久,也找很多朋友讨论这个问题,都没有得到有说服力的结论,真是百思不得其解!这样死抠细节,感觉有点浪费时间,毕竟这种面试题在生产中并不会出现,谁会去写这么奇葩的 Promise 代码, 放弃了,不去想了。
然而????,当天晚上夜黑风高夜深人静的时候,脑海里面依然轮播这道面试题,真的很想知道 Promise 内部到底是个什么逻辑,越想越睡不着~越睡不着越想~
无奈之下,决定参考 Promise A+ 规范手写一版 Promise,看看能不能从实现细节中找到蛛丝马迹。为了方便大家理解,下面我会利用不同 ???? 来介绍手写的细节和思路。文章最后会依据实现细节来探讨这道面试题,有手写经验的可以直接跳过手写 Promise 实现过程,看最后的结论。
如果感觉对 Promise 还不太熟悉的就先移步 Promise 入门,稍微做一下知识预习,了解一下 Promise 的常规用法。
我们都知道 Js 是单线程都,但是一些高耗时操作就带来了进程阻塞问题。为了解决这个问题,Js 有两种任务的执行模式:同步模式(Synchronous)和异步模式(Asynchronous)。
在异步模式下,创建异步任务主要分为宏任务与微任务两种。ES6 规范中,宏任务(Macrotask) 称为 Task, 微任务(Microtask) 称为 Jobs。宏任务是由宿主(浏览器、Node)发起的,而微任务由 JS 自身发起。
宏任务与微任务的几种创建方式?????
宏任务(Macrotask) | 微任务(Microtask) |
---|---|
setTimeout | requestAnimationFrame(有争议) |
setInterval | MutationObserver(浏览器环境) |
MessageChannel | Promise.[ then/catch/finally ] |
I/O,事件队列 | process.nextTick(Node环境) |
setImmediate(Node环境) | queueMicrotask |
script(整体代码块) |
如何理解 script(整体代码块)是个宏任务呢?????
实际上如果同时存在两个 script 代码块,会首先在执行第一个 script 代码块中的同步代码,如果这个过程中创建了微任务并进入了微任务队列,第一个 script 同步代码执行完之后,会首先去清空微任务队列,再去开启第二个 script 代码块的执行。所以这里应该就可以理解 script(整体代码块)为什么会是宏任务。
先来看个图
判断宏任务队列是否为空
不空 --> 执行最早进入队列的任务 --> 执行下一步
空 --> 执行下一步
判断微任务队列是否为空
不空 --> 执行最早进入队列的任务 -->?继续检查微任务队列空不空
空 --> 执行下一步
因为首次执行宏队列中会有 script(整体代码块)任务,所以实际上就是 Js 解析完成后,在异步任务中,会先执行完所有的微任务,这里也是很多面试题喜欢考察的。需要注意的是,新创建的微任务会立即进入微任务队列排队执行,不需要等待下一次轮回。
看到 A+ 肯定会想到是不是还有 A,事实上确实有。其实 Promise 有多种规范,除了前面的 Promise A、promise A+ 还有 Promise/B,Promise/D。目前我们使用的 Promise 是基于 Promise A+ 规范实现的,感兴趣的移步 Promise A+规范了解一下,这里不赘述。
检验一份手写 Promise 靠不靠谱,通过 Promise A+ 规范自然是基本要求,这里我们可以借助 promises-aplus-tests 来检测我们的代码是否符合规范,后面我会讲到如何使用它。
很多手写版本都是使用 setTimeout 去做异步处理,但是 setTimeout 属于宏任务,这与 Promise 是个微任务相矛盾,所以我打算选择一种创建微任务的方式去实现我们的手写代码。
这里我们有几种选择,一种就是 Promise A+ 规范中也提到的,process.nextTick( Node 端 ) 与MutationObserver( 浏览器端 ),考虑到利用这两种方式需要做环境判断,所以在这里我们就推荐另外一种创建微任务的方式?queueMicrotask
,了解更多 --> 在 JavaScript 中通过 queueMicrotask() 使用微任务;
我们先简单实现一下 Promise 的基础功能。先看原生 Promise 实现的 ????,第一步我们要完成相同的功能。
原生???? ????
const?promise?=?new?Promise((resolve,?reject)?=>?{
???resolve( success )
???reject( err )
})
promise.then(value?=>?{
??console.log( resolve ,?value)
},?reason?=>?{
??console.log( reject ,?reason)
})
//?输出?resolve?success
我们来分析一下基本原理:
Promise 是一个类,在执行这个类的时候会传入一个执行器,这个执行器会立即执行
Promise 会有三种状态
Pending 等待
Fulfilled 完成
Rejected 失败
状态只能由 Pending --> Fulfilled 或者 Pending --> Rejected,且一但发生改变便不可二次修改;
Promise 中使用 resolve 和 reject 两个函数来更改状态;
then 方法内部做但事情就是状态判断
如果状态是成功,调用成功回调函数
如果状态是失败,调用失败回调函数
下面开始实现:
//?新建?MyPromise.js
//?新建?MyPromise?类
class?MyPromise?{
??constructor(executor){
????//?executor?是一个执行器,进入会立即执行
????executor()?
??}
}
//?MyPromise.js
//?新建?MyPromise?类
class?MyPromise?{
??constructor(executor){
????//?executor?是一个执行器,进入会立即执行
????//?并传入resolve和reject方法
????executor(this.resolve,?this.reject)?
??}
??//?resolve和reject为什么要用箭头函数?
??//?如果直接调用的话,普通函数this指向的是window或者undefined
??//?用箭头函数就可以让this指向当前实例对象
??//?更改成功后的状态
??resolve?=?()?=>?{}
??//?更改失败后的状态
??reject?=?()?=>?{}
}
//?MyPromise.js
//?先定义三个常量表示状态
const?PENDING?=? pending ;
const?FULFILLED?=? fulfilled ;
const?REJECTED?=? rejected ;
//?新建?MyPromise?类
class?MyPromise?{
??constructor(executor){
????//?executor?是一个执行器,进入会立即执行
????//?并传入resolve和reject方法
????executor(this.resolve,?this.reject)
??}
??//?储存状态的变量,初始值是?pending
??status?=?PENDING;
??//?resolve和reject为什么要用箭头函数?
??//?如果直接调用的话,普通函数this指向的是window或者undefined
??//?用箭头函数就可以让this指向当前实例对象
??//?成功之后的值
??value?=?null;
??//?失败之后的原因
??reason?=?null;
??//?更改成功后的状态
??resolve?=?(value)?=>?{
????//?只有状态是等待,才执行状态修改
????if?(this.status?===?PENDING)?{
??????//?状态修改为成功
??????this.status?=?FULFILLED;
??????//?保存成功之后的值
??????this.value?=?value;
????}
??}
??//?更改失败后的状态
??reject?=?(reason)?=>?{
????//?只有状态是等待,才执行状态修改
????if?(this.status?===?PENDING)?{
??????//?状态成功为失败
??????this.status?=?REJECTED;
??????//?保存失败后的原因
??????this.reason?=?reason;
????}
??}
}
//?MyPromise.js
then(onFulfilled,?onRejected)?{
??//?判断状态
??if?(this.status?===?FULFILLED)?{
????//?调用成功回调,并且把值返回
????onFulfilled(this.value);
??}?else?if?(this.status?===?REJECTED)?{
????//?调用失败回调,并且把原因返回
????onRejected(this.reason);
??}
}
//?MyPromise.js
module.exports?=?MyPromise;
看一下我们目前实现的完整代码????
//?MyPromise.js
//?先定义三个常量表示状态
const?PENDING?=? pending ;
const?FULFILLED?=? fulfilled ;
const?REJECTED?=? rejected ;
//?新建?MyPromise?类
class?MyPromise?{
??constructor(executor){
????//?executor?是一个执行器,进入会立即执行
????//?并传入resolve和reject方法
????executor(this.resolve,?this.reject)
??}
??//?储存状态的变量,初始值是?pending
??status?=?PENDING;
??//?resolve和reject为什么要用箭头函数?
??//?如果直接调用的话,普通函数this指向的是window或者undefined
??//?用箭头函数就可以让this指向当前实例对象
??//?成功之后的值
??value?=?null;
??//?失败之后的原因
??reason?=?null;
??//?更改成功后的状态
??resolve?=?(value)?=>?{
????//?只有状态是等待,才执行状态修改
????if?(this.status?===?PENDING)?{
??????//?状态修改为成功
??????this.status?=?FULFILLED;
??????//?保存成功之后的值
??????this.value?=?value;
????}
??}
??//?更改失败后的状态
??reject?=?(reason)?=>?{
????//?只有状态是等待,才执行状态修改
????if?(this.status?===?PENDING)?{
??????//?状态成功为失败
??????this.status?=?REJECTED;
??????//?保存失败后的原因
??????this.reason?=?reason;
????}
??}
??then(onFulfilled,?onRejected)?{
????//?判断状态
????if?(this.status?===?FULFILLED)?{
??????//?调用成功回调,并且把值返回
??????onFulfilled(this.value);
????}?else?if?(this.status?===?REJECTED)?{
??????//?调用失败回调,并且把原因返回
??????onRejected(this.reason);
????}
??}
}
module.exports?=?MyPromise
使用我的手写代码执行一下上面那个????
//?新建?test.js
//?引入我们的?MyPromise.js
const?MyPromise?=?require( ./MyPromise )
const?promise?=?new?MyPromise((resolve,?reject)?=>?{
???resolve( success )
???reject( err )
})
promise.then(value?=>?{
??console.log( resolve ,?value)
},?reason?=>?{
??console.log( reject ,?reason)
})
//?执行结果:resolve?success
执行结果符合我们的预期,第一步完成了????????????
上面还没有经过异步处理,如果有异步逻辑加如来会带来一些问题,例如:
//?test.js
const?MyPromise?=?require( ./MyPromise )
const?promise?=?new?MyPromise((resolve,?reject)?=>?{
??setTimeout(()?=>?{
????resolve( success )
??},?2000);?
})
promise.then(value?=>?{
??console.log( resolve ,?value)
},?reason?=>?{
??console.log( reject ,?reason)
})
//?没有打印信息!!!
分析原因:
主线程代码立即执行,setTimeout 是异步代码,then 会马上执行,这个时候判断 Promise 状态,状态是 Pending,然而之前并没有判断等待这个状态
这里就需要我们处理一下 Pending 状态,我们改造一下之前的代码 ????
//?MyPromise.js
//?MyPromise?类中新增
//?存储成功回调函数
onFulfilledCallback?=?null;
//?存储失败回调函数
onRejectedCallback?=?null;
//?MyPromise.js
then(onFulfilled,?onRejected)?{
??//?判断状态
??if?(this.status?===?FULFILLED)?{
????//?调用成功回调,并且把值返回
????onFulfilled(this.value);
??}?else?if?(this.status?===?REJECTED)?{
????//?调用失败回调,并且把原因返回
????onRejected(this.reason);
??}?else?if?(this.status?===?PENDING)?{
????//?====?新增?====
????//?因为不知道后面状态的变化情况,所以将成功回调和失败回调存储起来
????//?等到执行成功失败函数的时候再传递
????this.onFulfilledCallback?=?onFulfilled;
????this.onRejectedCallback?=?onRejected;
??}
}
//?MyPromise.js
//?更改成功后的状态
resolve?=?(value)?=>?{
??//?只有状态是等待,才执行状态修改
??if?(this.status?===?PENDING)?{
????//?状态修改为成功
????this.status?=?FULFILLED;
????//?保存成功之后的值
????this.value?=?value;
????//?====?新增?====
????//?判断成功回调是否存在,如果存在就调用
????this.onFulfilledCallback?&&?this.onFulfilledCallback(value);
??}
}
//?MyPromise.js
//?更改失败后的状态
reject?=?(reason)?=>?{
??//?只有状态是等待,才执行状态修改
??if?(this.status?===?PENDING)?{
????//?状态成功为失败
????this.status?=?REJECTED;
????//?保存失败后的原因
????this.reason?=?reason;
????//?====?新增?====
????//?判断失败回调是否存在,如果存在就调用
????this.onRejectedCallback?&&?this.onRejectedCallback(reason)
??}
}
我们再执行一下上面的????
//?test.js
const?MyPromise?=?require( ./MyPromise )
const?promise?=?new?MyPromise((resolve,?reject)?=>?{
??setTimeout(()?=>?{
????resolve( success )
??},?2000);?
})
promise.then(value?=>?{
??console.log( resolve ,?value)
},?reason?=>?{
??console.log( reject ,?reason)
})
//?等待?2s?输出?resolve?success
目前已经可以简单处理异步问题了??
Promise 的 then 方法是可以被多次调用的。这里如果有三个 then 的调用,如果是同步回调,那么直接返回当前的值就行;如果是异步回调,那么保存的成功失败的回调,需要用不同的值保存,因为都互不相同。之前的代码需要改进。
同样的先看一个????
//?test.js
const?MyPromise?=?require( ./MyPromise )
const?promise?=?new?MyPromise((resolve,?reject)?=>?{
??setTimeout(()?=>?{
????resolve( success )
??},?2000);?
})
promise.then(value?=>?{
??console.log(1)
??console.log( resolve ,?value)
})
?
promise.then(value?=>?{
??console.log(2)
??console.log( resolve ,?value)
})
promise.then(value?=>?{
??console.log(3)
??console.log( resolve ,?value)
})
//?3
//?resolve?success
目前的代码只能输出:3 resolve success
,怎么可以把 1、2 弄丢呢!
我们应该一视同仁,保证所有 then 中的回调函数都可以执行 ???? 继续改造
//?MyPromise.js
//?存储成功回调函数
//?onFulfilledCallback?=?null;
onFulfilledCallbacks?=?[];
//?存储失败回调函数
//?onRejectedCallback?=?null;
onRejectedCallbacks?=?[];
//?MyPromise.js
then(onFulfilled,?onRejected)?{
??//?判断状态
??if?(this.status?===?FULFILLED)?{
????//?调用成功回调,并且把值返回
????onFulfilled(this.value);
??}?else?if?(this.status?===?REJECTED)?{
????//?调用失败回调,并且把原因返回
????onRejected(this.reason);
??}?else?if?(this.status?===?PENDING)?{
????//?====?新增?====
????//?因为不知道后面状态的变化,这里先将成功回调和失败回调存储起来
????//?等待后续调用
????this.onFulfilledCallbacks.push(onFulfilled);
????this.onRejectedCallbacks.push(onRejected);
??}
}
//?MyPromise.js
//?更改成功后的状态
resolve?=?(value)?=>?{
??//?只有状态是等待,才执行状态修改
??if?(this.status?===?PENDING)?{
????//?状态修改为成功
????this.status?=?FULFILLED;
????//?保存成功之后的值
????this.value?=?value;
????//?====?新增?====
????//?resolve里面将所有成功的回调拿出来执行
????while?(this.onFulfilledCallbacks.length)?{
??????//?Array.shift()?取出数组第一个元素,然后()调用,shift不是纯函数,取出后,数组将失去该元素,直到数组为空
??????this.onFulfilledCallbacks.shift()(value)
????}
??}
}
//?MyPromise.js
//?更改失败后的状态
reject?=?(reason)?=>?{
??//?只有状态是等待,才执行状态修改
??if?(this.status?===?PENDING)?{
????//?状态成功为失败
????this.status?=?REJECTED;
????//?保存失败后的原因
????this.reason?=?reason;
????//?====?新增?====
????//?resolve里面将所有失败的回调拿出来执行
????while?(this.onRejectedCallbacks.length)?{
??????this.onRejectedCallbacks.shift()(reason)
????}
??}
}
再来运行一下,看看结果????
1
resolve?success
2
resolve?success
3
resolve?success
???????????? 完美,继续
then 方法要链式调用那么就需要返回一个 Promise 对象
then 方法里面 return 一个返回值作为下一个 then 方法的参数,如果是 return 一个 Promise 对象,那么就需要判断它的状态
举个栗子 ????
//?test.js
const?MyPromise?=?require( ./MyPromise )
const?promise?=?new?MyPromise((resolve,?reject)?=>?{
??//?目前这里只处理同步的问题
??resolve( success )
})
function?other?()?{
??return?new?MyPromise((resolve,?reject)?=>{
????resolve( other )
??})
}
promise.then(value?=>?{
??console.log(1)
??console.log( resolve ,?value)
??return?other()
}).then(value?=>?{
??console.log(2)
??console.log( resolve ,?value)
})
用目前的手写代码运行的时候会报错 ???? 无法链式调用
}).then(value?=>?{
??^
TypeError:?Cannot?read?property? then ?of?undefined
接着改 ????
//?MyPromise.js
class?MyPromise?{
??......
??then(onFulfilled,?onRejected)?{
????//?====?新增?====
????//?为了链式调用这里直接创建一个?MyPromise,并在后面?return?出去
????const?promise2?=?new?MyPromise((resolve,?reject)?=>?{
??????//?这里的内容在执行器中,会立即执行
??????if?(this.status?===?FULFILLED)?{
????????//?获取成功回调函数的执行结果
????????const?x?=?onFulfilled(this.value);
????????//?传入?resolvePromise?集中处理
????????resolvePromise(x,?resolve,?reject);
??????}?else?if?(this.status?===?REJECTED)?{
????????onRejected(this.reason);
??????}?else?if?(this.status?===?PENDING)?{
????????this.onFulfilledCallbacks.push(onFulfilled);
????????this.onRejectedCallbacks.push(onRejected);
??????}
????})?
????
????return?promise2;
??}
}
function?resolvePromise(x,?resolve,?reject)?{
??//?判断x是不是?MyPromise?实例对象
??if(x?instanceof?MyPromise)?{
????//?执行?x,调用?then?方法,目的是将其状态变为?fulfilled?或者?rejected
????//?x.then(value?=>?resolve(value),?reason?=>?reject(reason))
????//?简化之后
????x.then(resolve,?reject)
??}?else{
????//?普通值
????resolve(x)
??}
}
执行一下,结果????
1
resolve?success
2
resolve?other
em... 符合预期 ????
如果 then 方法返回的是自己的 Promise 对象,则会发生循环调用,这个时候程序会报错
例如下面这种情况????
//?test.js
const?promise?=?new?Promise((resolve,?reject)?=>?{
??resolve(100)
})
const?p1?=?promise.then(value?=>?{
??console.log(value)
??return?p1
})
使用原生 Promise 执行这个代码,会报类型错误
100
Uncaught?(in?promise)?TypeError:?Chaining?cycle?detected?for?promise?#<Promise>
我们在 MyPromise 实现一下
//?MyPromise.js
class?MyPromise?{
??......
??then(onFulfilled,?onRejected)?{
????const?promise2?=?new?MyPromise((resolve,?reject)?=>?{
??????if?(this.status?===?FULFILLED)?{
????????const?x?=?onFulfilled(this.value);
????????//?resolvePromise?集中处理,将?promise2?传入
????????resolvePromise(promise2,?x,?resolve,?reject);
??????}?else?if?(this.status?===?REJECTED)?{
????????onRejected(this.reason);
??????}?else?if?(this.status?===?PENDING)?{
????????this.onFulfilledCallbacks.push(onFulfilled);
????????this.onRejectedCallbacks.push(onRejected);
??????}
????})?
????
????return?promise2;
??}
}
function?resolvePromise(promise2,?x,?resolve,?reject)?{
??//?如果相等了,说明return的是自己,抛出类型错误并返回
??if?(promise2?===?x)?{
????return?reject(new?TypeError( Chaining?cycle?detected?for?promise?#<Promise> ))
??}
??if(x?instanceof?MyPromise)?{
????x.then(resolve,?reject)
??}?else{
????resolve(x)
??}
}
执行一下,竟然报错了 ????
????????resolvePromise(promise2,?x,?resolve,?reject);
???????????????????????^
ReferenceError:?Cannot?access? promise2 ?before?initialization
为啥会报错呢?从错误提示可以看出,我们必须要等 promise2 完成初始化。这个时候我们就要用上宏微任务和事件循环的知识了,这里就需要创建一个异步函数去等待 promise2 完成初始化,前面我们已经确认了创建微任务的技术方案 -->?queueMicrotask
//?MyPromise.js
class?MyPromise?{
??......
??then(onFulfilled,?onRejected)?{
????const?promise2?=?new?MyPromise((resolve,?reject)?=>?{
??????if?(this.status?===?FULFILLED)?{
????????//?====?新增?====
????????//?创建一个微任务等待?promise2?完成初始化
????????queueMicrotask(()?=>?{
??????????//?获取成功回调函数的执行结果
??????????const?x?=?onFulfilled(this.value);
??????????//?传入?resolvePromise?集中处理
??????????resolvePromise(promise2,?x,?resolve,?reject);
????????})??
??????}?else?if?(this.status?===?REJECTED)?{
??????......
????})?
????
????return?promise2;
??}
}
执行一下
//?test.js
const?MyPromise?=?require( ./MyPromise )
const?promise?=?new?MyPromise((resolve,?reject)?=>?{
????resolve( success )
})
?
//?这个时候将promise定义一个p1,然后返回的时候返回p1这个promise
const?p1?=?promise.then(value?=>?{
???console.log(1)
???console.log( resolve ,?value)
???return?p1
})
?
//?运行的时候会走reject
p1.then(value?=>?{
??console.log(2)
??console.log( resolve ,?value)
},?reason?=>?{
??console.log(3)
??console.log(reason.message)
})
这里得到我们的结果 ????
1
resolve?success
3
Chaining?cycle?detected?for?promise?#<Promise>
哈哈,搞定 ???? 开始下一步
目前还缺少重要的一个环节,就是我们的错误捕获还没有处理
捕获执行器中的代码,如果执行器中有代码错误,那么 Promise 的状态要变为失败
//?MyPromise.js
constructor(executor){
??//?====?新增?====
??//?executor?是一个执行器,进入会立即执行
??//?并传入resolve和reject方法
??try?{
????executor(this.resolve,?this.reject)
??}?catch?(error)?{
????//?如果有错误,就直接执行?reject
????this.reject(error)
??}
}
验证一下:
//?test.js
const?MyPromise?=?require( ./MyPromise )
const?promise?=?new?MyPromise((resolve,?reject)?=>?{
????//?resolve( success )
????throw?new?Error( 执行器错误 )
})
?
promise.then(value?=>?{
??console.log(1)
??console.log( resolve ,?value)
},?reason?=>?{
??console.log(2)
??console.log(reason.message)
})
执行结果 ????
2
执行器错误
OK,通过 ????
//?MyPromise.js
then(onFulfilled,?onRejected)?{
??//?为了链式调用这里直接创建一个?MyPromise,并在后面?return?出去
??const?promise2?=?new?MyPromise((resolve,?reject)?=>?{
????//?判断状态
????if?(this.status?===?FULFILLED)?{
??????//?创建一个微任务等待?promise2?完成初始化
??????queueMicrotask(()?=>?{
????????//?====?新增?====
????????try?{
??????????//?获取成功回调函数的执行结果
??????????const?x?=?onFulfilled(this.value);
??????????//?传入?resolvePromise?集中处理
??????????resolvePromise(promise2,?x,?resolve,?reject);
????????}?catch?(error)?{
??????????reject(error)
????????}??
??????})??
????}?else?if?(this.status?===?REJECTED)?{
??????//?调用失败回调,并且把原因返回
??????onRejected(this.reason);
????}?else?if?(this.status?===?PENDING)?{
??????//?等待
??????//?因为不知道后面状态的变化情况,所以将成功回调和失败回调存储起来
??????//?等到执行成功失败函数的时候再传递
??????this.onFulfilledCallbacks.push(onFulfilled);
??????this.onRejectedCallbacks.push(onRejected);
????}
??})?
??
??return?promise2;
}
验证一下:
//?test.js
const?MyPromise?=?require( ./MyPromise )
const?promise?=?new?MyPromise((resolve,?reject)?=>?{
????resolve( success )
????//?throw?new?Error( 执行器错误 )
?})
?
//?第一个then方法中的错误要在第二个then方法中捕获到
promise.then(value?=>?{
??console.log(1)
??console.log( resolve ,?value)
??throw?new?Error( then?error )
},?reason?=>?{
??console.log(2)
??console.log(reason.message)
}).then(value?=>?{
??console.log(3)
??console.log(value);
},?reason?=>?{
??console.log(4)
??console.log(reason.message)
})
执行结果 ????
1
resolve?success
4
then?error
这里成功打印了1中抛出的错误?then error
改造内容包括:
增加异步状态下的链式调用
增加回调函数执行结果的判断
增加识别 Promise 是否返回自己
增加错误捕获
//?MyPromise.js
then(onFulfilled,?onRejected)?{
??//?为了链式调用这里直接创建一个?MyPromise,并在后面?return?出去
??const?promise2?=?new?MyPromise((resolve,?reject)?=>?{
????//?判断状态
????if?(this.status?===?FULFILLED)?{
??????//?创建一个微任务等待?promise2?完成初始化
??????queueMicrotask(()?=>?{
????????try?{
??????????//?获取成功回调函数的执行结果
??????????const?x?=?onFulfilled(this.value);
??????????//?传入?resolvePromise?集中处理
??????????resolvePromise(promise2,?x,?resolve,?reject);
????????}?catch?(error)?{
??????????reject(error)
????????}?
??????})??
????}?else?if?(this.status?===?REJECTED)?{?
??????//?====?新增?====
??????//?创建一个微任务等待?promise2?完成初始化
??????queueMicrotask(()?=>?{
????????try?{
??????????//?调用失败回调,并且把原因返回
??????????const?x?=?onRejected(this.reason);
??????????//?传入?resolvePromise?集中处理
??????????resolvePromise(promise2,?x,?resolve,?reject);
????????}?catch?(error)?{
??????????reject(error)
????????}?
??????})?
????}?else?if?(this.status?===?PENDING)?{
??????//?等待
??????//?因为不知道后面状态的变化情况,所以将成功回调和失败回调存储起来
??????//?等到执行成功失败函数的时候再传递
??????this.onFulfilledCallbacks.push(()?=>?{
????????//?====?新增?====
????????queueMicrotask(()?=>?{
??????????try?{
????????????//?获取成功回调函数的执行结果
????????????const?x?=?onFulfilled(this.value);
????????????//?传入?resolvePromise?集中处理
????????????resolvePromise(promise2,?x,?resolve,?reject);
??????????}?catch?(error)?{
????????????reject(error)
??????????}?
????????})?
??????});
??????this.onRejectedCallbacks.push(()?=>?{
????????//?====?新增?====
????????queueMicrotask(()?=>?{
??????????try?{
????????????//?调用失败回调,并且把原因返回
????????????const?x?=?onRejected(this.reason);
????????????//?传入?resolvePromise?集中处理
????????????resolvePromise(promise2,?x,?resolve,?reject);
??????????}?catch?(error)?{
????????????reject(error)
??????????}?
????????})?
??????});
????}
??})?
??
??return?promise2;
}