带你写出符合Promise/A+ 规范Promise的源码

Promise是前端面试中的高频问题，如果你能根据PromiseA+的规范，写出符合规范的源码，那么我想，对于面试中的Promise相关的问题，都能够给出比较完美的答案。

Promise是前端面试中的高频问题，如果你能根据PromiseA+的规范，写出符合规范的源码，那么我想，对于面试中的Promise相关的问题，都能够给出比较完美的答案。

我的建议是，对照规范多写几次实现，也许第一遍的时候，是改了多次，才能通过测试，那么需要反复的写，我已经将Promise的源码实现写了不下七遍，不那么聪明的话，当然需要更加努力啦~

[[335576]]

Promise的源码实现

/**
*1.newPromise时，需要传递一个executor执行器，执行器立刻执行
*2.executor接受两个参数，分别是resolve和reject
*3.promise只能从pending到rejected,或者从pending到fulfilled
*4.promise的状态一旦确认，就不会再改变
*5.promise都有then方法，then接收两个参数，分别是promise成功的回调onFulfilled,
*和promise失败的回调onRejected
*6.如果调用then时，promise已经成功，则执行onFulfilled，并将promise的值作为参数传递进去。
*如果promise已经失败，那么执行onRejected,并将promise失败的原因作为参数传递进去。
*如果promise的状态是pending，需要将onFulfilled和onRejected函数存放起来，等待状态确定后，再依次将对应的函数执行(发布订阅)
*7.then的参数onFulfilled和onRejected可以缺省
*8.promise可以then多次，promise的then方法返回一个promise
*9.如果then返回的是一个结果，那么就会把这个结果作为参数，传递给下一个then的成功的回调(onFulfilled)
*10.如果then中抛出了异常，那么就会把这个异常作为参数，传递给下一个then的失败的回调(onRejected)
*11.如果then返回的是一个promise，那么会等这个promise执行完，promise如果成功，
*就走下一个then的成功，如果失败，就走下一个then的失败
*/
constPENDING='pending';
constFULFILLED='fulfilled';
constREJECTED='rejected';
functionPromise(executor){
letself=this;
self.status=PENDING;
self.onFulfilled=[];//成功的回调
self.onRejected=[];//失败的回调
//PromiseA+2.1
functionresolve(value){
if(self.status===PENDING){
self.status=FULFILLED;
self.value=value;
self.onFulfilled.forEach(fn=>fn());//PromiseA+2.2.6.1
}
}
functionreject(reason){
if(self.status===PENDING){
self.status=REJECTED;
self.reason=reason;
self.onRejected.forEach(fn=>fn());//PromiseA+2.2.6.2
}
}
try{
executor(resolve,reject);
}catch(e){
reject(e);
}
}
Promise.prototype.then=function(onFulfilled,onRejected){
//PromiseA+2.2.1/PromiseA+2.2.5/PromiseA+2.2.7.3/PromiseA+2.2.7.4
onFulfilled=typeofonFulfilled==='function'?onFulfilled:value=>value;
onRejected=typeofonRejected==='function'?onRejected:reason=>{throwreason};
letself=this;
//PromiseA+2.2.7
letpromise2=newPromise((resolve,reject)=>{
if(self.status===FULFILLED){
//PromiseA+2.2.2
//PromiseA+2.2.4---setTimeout
setTimeout(()=>{
try{
//PromiseA+2.2.7.1
letx=onFulfilled(self.value);
resolvePromise(promise2,x,resolve,reject);
}catch(e){
//PromiseA+2.2.7.2
reject(e);
}
});
}elseif(self.status===REJECTED){
//PromiseA+2.2.3
setTimeout(()=>{
try{
letx=onRejected(self.reason);
resolvePromise(promise2,x,resolve,reject);
}catch(e){
reject(e);
}
});
}elseif(self.status===PENDING){
self.onFulfilled.push(()=>{
setTimeout(()=>{
try{
letx=onFulfilled(self.value);
resolvePromise(promise2,x,resolve,reject);
}catch(e){
reject(e);
}
});
});
self.onRejected.push(()=>{
setTimeout(()=>{
try{
letx=onRejected(self.reason);
resolvePromise(promise2,x,resolve,reject);
}catch(e){
reject(e);
}
});
});
}
});
returnpromise2;
}
functionresolvePromise(promise2,x,resolve,reject){
letself=this;
//PromiseA+2.3.1
if(promise2===x){
reject(newTypeError('Chainingcycle'));
}
if(x&&typeofx==='object'||typeofx==='function'){
letused;//PromiseA+2.3.3.3.3只能调用一次
try{
letthen=x.then;
if(typeofthen==='function'){
//PromiseA+2.3.3
then.call(x,(y)=>{
//PromiseA+2.3.3.1
if(used)return;
used=true;
resolvePromise(promise2,y,resolve,reject);
},(r)=>{
//PromiseA+2.3.3.2
if(used)return;
used=true;
reject(r);
});
}else{
//PromiseA+2.3.3.4
if(used)return;
used=true;
resolve(x);
}
}catch(e){
//PromiseA+2.3.3.2
if(used)return;
used=true;
reject(e);
}
}else{
//PromiseA+2.3.3.4
resolve(x);
}
}
module.exports=Promise;

有专门的测试脚本可以测试所编写的代码是否符合PromiseA+的规范。

首先，在promise实现的代码中，增加以下代码:

PromisePromise.defer=Promise.deferred=function(){
letdfd={};
dfd.promise=newPromise((resolve,reject)=>{
dfd.resolve=resolve;
dfd.reject=reject;
});
returndfd;
}

安装测试脚本:

npminstall-gpromises-aplus-tests

如果当前的promise源码的文件名为promise.js

那么在对应的目录执行以下命令:

promises-aplus-testspromise.js

promises-aplus-tests中共有872条测试用例。以上代码，可以完美通过所有用例。

对上面的代码实现做一点简要说明(其它一些内容注释中已经写得很清楚):

1. onFulfilled 和 onFulfilled的调用需要放在setTimeout，因为规范中表示: onFulfilled or onRejected must not be called until the execution context stack contains only platform code。使用setTimeout只是模拟异步，原生Promise并非是这样实现的。

2. 在 resolvePromise 的函数中，为何需要usedd这个flag,同样是因为规范中明确表示: If both resolvePromise and rejectPromise are called, or multiple calls to the same argument are made, the first call takes precedence, and any further calls are ignored. 因此我们需要这样的flag来确保只会执行一次。

3. self.onFulfilled 和 self.onRejected 中存储了成功的回调和失败的回调，根据规范2.6显示，当promise从pending态改变的时候，需要按照顺序去指定then对应的回调。

PromiseA+的规范(翻译版)

PS: 下面是我翻译的规范，供参考

术语

1. promise 是一个有then方法的对象或者是函数，行为遵循本规范
2. thenable 是一个有then方法的对象或者是函数
3. value 是promise状态成功时的值，包括 undefined/thenable或者是 promise
4. exception 是一个使用throw抛出的异常值
5. reason 是promise状态失败时的值

要求

2.1 Promise States

Promise 必须处于以下三个状态之一: pending, fulfilled 或者是 rejected

2.1.1 如果promise在pending状态

2.1.1.1可以变成fulfilled或者是rejected

2.1.2 如果promise在fulfilled状态

2.1.2.1不会变成其它状态
2.1.2.2必须有一个value值

2.1.3 如果promise在rejected状态

2.1.3.1不会变成其它状态
2.1.3.2必须有一个promise被reject的reason

概括即是:promise的状态只能从pending变成fulfilled，或者从pending变成rejected.promise成功，有成功的value.promise失败的话，有失败的原因

2.2 then方法

promise必须提供一个then方法，来访问最终的结果

promise的then方法接收两个参数

promise.then(onFulfilled,onRejected)

2.2.1 onFulfilled 和 onRejected 都是可选参数

2.2.1.1onFulfilled必须是函数类型
2.2.1.2onRejected必须是函数类型

2.2.2 如果 onFulfilled 是函数:

2.2.2.1必须在promise变成fulfilled时，调用onFulfilled，参数是promise的value
2.2.2.2在promise的状态不是fulfilled之前，不能调用
2.2.2.3onFulfilled只能被调用一次

2.2.3 如果 onRejected 是函数:

2.2.3.1必须在promise变成rejected时，调用onRejected，参数是promise的reason
2.2.3.2在promise的状态不是rejected之前，不能调用
2.2.3.3onRejected只能被调用一次

2.2.4 onFulfilled 和 onRejected 应该是微任务

2.2.5 onFulfilled 和 onRejected 必须作为函数被调用

2.2.6 then方法可能被多次调用

2.2.6.1如果promise变成了fulfilled态，所有的onFulfilled回调都需要按照then的顺序执行
2.2.6.2如果promise变成了rejected态，所有的onRejected回调都需要按照then的顺序执行

2.2.7 then必须返回一个promise

promise2=promise1.then(onFulfilled,onRejected);
2.2.7.1onFulfilled或onRejected执行的结果为x,调用resolvePromise
2.2.7.2如果onFulfilled或者onRejected执行时抛出异常e,promise2需要被reject
2.2.7.3如果onFulfilled不是一个函数，promise2以promise1的值fulfilled
2.2.7.4如果onRejected不是一个函数，promise2以promise1的reasonrejected

2.3 resolvePromise

resolvePromise(promise2, x, resolve, reject)

2.3.1 如果 promise2 和 x 相等，那么 reject promise with a TypeError

2.3.2 如果 x 是一个 promsie

2.3.2.1如果x是pending态，那么promise必须要在pending,直到x变成fulfilledorrejected.
2.3.2.2如果x被fulfilled,fulfillpromisewiththesamevalue.
2.3.2.3如果x被rejected,rejectpromisewiththesamereason.

2.3.3 如果 x 是一个 object 或者 是一个 function

2.3.3.1letthen=x.then.
2.3.3.2如果x.then这步出错，那么rejectpromisewitheasthereason..
2.3.3.3如果then是一个函数，then.call(x,resolvePromiseFn,rejectPromise)
2.3.3.3.1resolvePromiseFn的入参是y,执行resolvePromise(promise2,y,resolve,reject);
2.3.3.3.2rejectPromise的入参是r,rejectpromisewithr.
2.3.3.3.3如果resolvePromise和rejectPromise都调用了，那么第一个调用优先，后面的调用忽略。
2.3.3.3.4如果调用then抛出异常e
2.3.3.3.4.1如果resolvePromise或rejectPromise已经被调用，那么忽略
2.3.3.3.4.3否则，rejectpromisewitheasthereason
2.3.3.4如果then不是一个function.fulfillpromisewithx.

2.3.4 如果 x 不是一个 object 或者 function，fulfill promise with x.

Promise的其他方法

虽然上述的promise源码已经符合PromiseA+的规范，但是原生的Promise还提供了一些其他方法，如:

1. Promise.resolve()
2. Promise.reject()
3. Promise.prototype.catch()
4. Promise.prototype.finally()
5. Promise.all()
6. Promise.race()

下面具体说一下每个方法的实现:

Promise.resolve

Promise.resolve(value) 返回一个以给定值解析后的Promise 对象.

1. 如果 value 是个 thenable 对象，返回的promise会“跟随”这个thenable的对象，采用它的最终状态
2. 如果传入的value本身就是promise对象，那么Promise.resolve将不做任何修改、原封不动地返回这个promise对象。
3. 其他情况，直接返回以该值为成功状态的promise对象。

Promise.resolve=function(param){
if(paraminstanceofPromise){
returnparam;
}
returnnewPromise((resolve,reject)=>{
if(param&&typeofparam==='object'&&typeofparam.then==='function'){
setTimeout(()=>{
param.then(resolve,reject);
});
}else{
resolve(param);
}
});
}

thenable对象的执行加 setTimeout的原因是根据原生Promise对象执行的结果推断的，如下的测试代码，原生的执行结果为: 20 400 30;为了同样的执行顺序，增加了setTimeout延时。

测试代码:

letp=Promise.resolve(20);
p.then((data)=>{
console.log(data);
});
letp2=Promise.resolve({
then:function(resolve,reject){
resolve(30);
}
});
p2.then((data)=>{
console.log(data)
});
letp3=Promise.resolve(newPromise((resolve,reject)=>{
resolve(400)
}));
p3.then((data)=>{
console.log(data)
});

Promise.reject

Promise.reject方法和Promise.resolve不同，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。

Promise.reject=function(reason){
returnnewPromise((resolve,reject)=>{
reject(reason);
});
}

Promise.prototype.catch

Promise.prototype.catch 用于指定出错时的回调，是特殊的then方法，catch之后，可以继续 .then

Promise.prototype.catch=function(onRejected){
returnthis.then(null,onRejected);
}

Promise.prototype.finally

不管成功还是失败，都会走到finally中,并且finally之后，还可以继续then。并且会将值原封不动的传递给后面的then.

Promise.prototype.finally=function(callback){
returnthis.then((value)=>{
returnPromise.resolve(callback()).then(()=>{
returnvalue;
});
},(err)=>{
returnPromise.resolve(callback()).then(()=>{
throwerr;
});
});
}

Promise.all

Promise.all(promises) 返回一个promise对象

1. 如果传入的参数是一个空的可迭代对象，那么此promise对象回调完成(resolve),只有此情况，是同步执行的，其它都是异步返回的。
2. 如果传入的参数不包含任何 promise，则返回一个异步完成.
3. promises 中所有的promise都promise都“完成”时或参数中不包含 promise 时回调完成。
4. 如果参数中有一个promise失败，那么Promise.all返回的promise对象失败
5. 在任何情况下，Promise.all 返回的 promise 的完成状态的结果都是一个数组

Promise.all=function(promises){
promises=Array.from(promises);//将可迭代对象转换为数组
returnnewPromise((resolve,reject)=>{
letindex=0;
letresult=[];
if(promises.length===0){
resolve(result);
}else{
functionprocessValue(i,data){
result[i]=data;
if(++index===promises.length){
resolve(result);
}
}
for(leti=0;i<promises.length;i++){
//promises[i]可能是普通值
Promise.resolve(promises[i]).then((data)=>{
processValue(i,data);
},(err)=>{
reject(err);
return;
});
}
}
});
}

测试代码:

varpromise1=newPromise((resolve,reject)=>{
resolve(3);
})
varpromise2=42;
varpromise3=newPromise(function(resolve,reject){
setTimeout(resolve,100,'foo');
});
Promise.all([promise1,promise2,promise3]).then(function(values){
console.log(values);//[3,42,'foo']
},(err)=>{
console.log(err)
});
varp=Promise.all([]);//willbeimmediatelyresolved
varp2=Promise.all([1337,"hi"]);//non-promisevalueswillbeignored,buttheevaluationwillbedoneasynchronously
console.log(p);
console.log(p2)
setTimeout(function(){
console.log('thestackisnowempty');
console.log(p2);
});

Promise.race

Promise.race函数返回一个 Promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是两个中的哪个。

如果传的参数数组是空，则返回的 promise 将永远等待。

如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺，则 Promise.race 将解析为迭代中找到的第一个值。

Promise.race=function(promises){
promises=Array.from(promises);//将可迭代对象转换为数组
returnnewPromise((resolve,reject)=>{
if(promises.length===0){
return;
}else{
for(leti=0;i<promises.length;i++){
Promise.resolve(promises[i]).then((data)=>{
resolve(data);
return;
},(err)=>{
reject(err);
return;
});
}
}
});
}

测试代码:

Promise.race([
newPromise((resolve,reject)=>{setTimeout(()=>{resolve(100)},1000)}),
undefined,
newPromise((resolve,reject)=>{setTimeout(()=>{reject(100)},100)})
]).then((data)=>{
console.log('success',data);
},(err)=>{
console.log('err',err);
});
Promise.race([
newPromise((resolve,reject)=>{setTimeout(()=>{resolve(100)},1000)}),
newPromise((resolve,reject)=>{setTimeout(()=>{resolve(200)},200)}),
newPromise((resolve,reject)=>{setTimeout(()=>{reject(100)},100)})
]).then((data)=>{
console.log(data);
},(err)=>{
console.log(err);
});