Promise原理剖析

传统的异步回调编程最大的缺陷是：回调地狱，由于业务逻辑非常复杂，代码串行请求好几层；并行请求以前也要通过引用step、async库实现。现在ES6推出了Promise,通过Promise的链式调用可以解决回调地狱问题，通过Promise.all方法可以解决并行请求的问题。现在我们通过手写Promise来彻底理解Promise的原理。

 一、构造简单Promise函数，实现Promise的then方法

先来看一下简单的使用方法：

var promise=new Promise(function(resolved,rejected){
　　console.log(1);
　　resolved('123');
})
promise.then(function(data){
　　console.log('success'+data)
},function(err){
　　console.log('fail'+err)
})

　　

注意点：

1. new Promise传入的executor方法代码是同步执行的；

2. promise对象的状态有三种：pending(等待态),resolved(成功态),rejected(失败态)，只能从等待态转化成成功态或失败态；

3. executor中执行resolve()方法，表示将转化为成功态，promise.then调用时执行成功的方法，executor中执行reject()方法，表示将转化为成功态，promise.then调用时执行失败的方法。

思路：

1. 首先构造一个类Promise，传入一个参数executor方法；

2. 用status记录Promise状态，默认是pending,成功态是resolved，失败态是rejected, execuotor执行时，重写resolve、reject方法，执行到这两个方法时，将promise状态修改，并将参数存储起来，以便then方法调用；

3.当实例执行then方法时，依据promise状态来执行成功方法或失败方法。

这样就实现了这个简单的peomise，代码如下：

function Promise(executor){
　　let self=this;
　　self.status='pending';
　　self.value=undefined;
　　self.reason=undefined;
function resolve(value){
　　if(self.status==='pending'){
　　　　self.value=value;
　　　　self.status='resolved';
　　}
}
function reject(reason){
　　if(self.status==='pending'){
　　　　self.reason=reason;
　　　　self.status='rejected';
　　}
}
　　try{
　　　　executor(resolve,reject) //第一步：先执行executor,根据里面resolve和reject的调用，执行上面的resolve和reject方法
　　}catch(e){
　　　　reject(e);
　　}
}
Promise.prototype.then=function(onFulfilled,onRejected){
　　let self=this;//第二步：then被调用的时候根据已经记录的promise状态，执行成功方法或失败方法
　　if(self.status==='resolved'){
　　　　onFulfilled(self.value);
　　}
　　if(self.status==='rejected'){
　　　　onRejected(self.reason);
　　}
}
module.exports = Promise

二、实现Promise executor中的异步调用

先来看一下简单使用小例子：

var promise=new Promise(function(resolve,reject){
    console.log('hello')
    setTimeout(function(){
        resolve('ok')
    },1000);
})
promise.then(function(data){
    console.log('success'+data)
},function(err){
    console.log('fail'+err)
})        

上面例子，先打印出hello，过1秒后执行resolve方法，打印出successok。

注意点：

1. executor执行一秒之后再调用resolve方法，才会执行then中的成功方法；

思路：

1. executor中方法没调用resolve之前，Promise方法一直是pending状态，这时候执行器已经执行完了then方法，这时我们把then方法中的成功方法和失败方法存入数组，当resolve方法调用时，去执行这些存储起来的方法；

2. 没有异步调用的话，executor执行时执行resolve方法，成功数组 为空，所以不会被影响，还是在then方法中去执行成功或失败方法。

 

function Promise(executor){
　　let self=this;
　　self.status='pending';
　　self.value=undefined;
　　self.reason=undefined;
　　self.onResolvedCallbacks=[];
　　self.onRejectedCallbacks=[];
　　function resolve(value){
　　　　if(self.status==='pending'){
　　　　　　self.value=value;
　　　　　　self.status='resolved';
　　　　　　self.onResolvedCallbacks.forEach(item=>item());//最终执行resolve方法时，修改状态，将成功数组中的方法取出，一一执行。
　　　　}
　　}
　　function reject(reason){
　　　　if(self.status==='pending'){
　　　　　　self.reason=reason;
　　　　　　self.status='rejected';
　　　　　　self.onRejectedCallbacks.forEach(item=>item());//最终执行reject方法时，修改状态，将失败数组中的方法取出，一一执行。
　　　　}
　　}
　　try{
　　　　executor(resolve,reject)
　　}catch(e){
　　　　reject(e);
　　}
}
Promise.prototype.then=function(onFulfilled,onRejected){
　　let self=this;
　　if(self.status==='resolved'){
　　　　onFulfilled(self.value);
　　}
　　if(self.status==='rejected'){
　　　　onRejected(self.reason);
　　}
　　if(self.status==='pending'){ //执行then的时候是等待态，就将成功方法存入onResolvedCallbacks数组，将失败方法存入onRejectedCallbacks数组
　　　　self.onResolvedCallbacks.push(function(){
　　　　　　onFulfilled(self.value);
　　　　});
　　　　self.onRejectedCallbacks.push(function(){
　　　　　　onRejected(self.reason);
　　　　});
　　}
}
module.exports = Promise

三、实现Promise then的链式调用

链式调用是Promise中的核心方法，也是最重要的一个方法，先来看一下链式调用的用法：

let p=new Promise((resolve,reject)=>{
　　console.log(1);
　　setTimeout(function(){
　　　　resolve('123');
　　},1000);
})
let p2=p.then((data)=>{
　　console.log(data);
　　return new Promise((resolve,reject)=>{
　　　　setTimeout(function(){
　　　　　　resolve('456');
　　　　},1000);
　　});
},err=>{
　　console.log(err);
　　throw Error('失败');
}).then((data)=>{
　　console.log('aaa'+data);
},(err)=>{
　　console.log(err);
})

上面代码首先打印出executor中的1,1秒之后执行resolve方法执行第一个then中的成功方法，先打印出123,再执行此方法中return的Promise，一秒之后执行下一个then的成功方法,打印出aaa456。

注意点：

1. 如果then方法返回一个普通值，执行下一个then的成功方法；

2. 如果抛出一个错误，执行下一个then的失败方法；

3. then方法中返回一个Promise对象，等待Promise对象执行成功就调用下个then的成功方法，这个Promise调用reject()就执行下一个then的失败方法；

思路：

1.在then方法后之所以可以接着调用then方法，肯定then方法需要返回一个Promise实例;

2. 在then方法中我们用x去接收成功或失败方法的返回值，当成功或失败方法抛出错误，直接执行reject，调用下一个then的失败方法，专门写了一个方法resolvePromise分析返回值；

3. resolvePromise方法中传入了四个参数，then中的Promise2，x值；

4. 如果x与promise相等，报类型错误循环引用；

5. 当x不是null,是个对象类型或者是个函数类型，并且他的then方法也是函数类型时，我们认为x是一个promise实例，执行x.then()方法；再用resolvePromise方法分析他的成功的返回值；

6. 如果x不是null不是object或function,我们认为x是一个普通值，执行promise2中的resolve方法；

7. 如果x.then方法获取失败，调用promise2的reject方法；

8. 定义一个called为true，当执行过resolve或reject方法后将其变为false，保证resolve和reject方法只执行一次；

9. 这里面存在两个递归调用，一个是then方法里面return new Promise方法,一个是resolvePromise方法，第一个的递归调用解决了executor中异步调用的问题，第二个递归调用解决了return Promise实例的问题。

代码如下：

 

function Promise(executor){
　　let self=this;
　　self.status='pending';
　　self.value=undefined;
　　self.reason=undefined;
　　self.onResolvedCallbacks = []; // 存放then成功的回调
　　self.onRejectedCallbacks = []; // 存放then失败的回调
 
　　function resolve(value){
　　　　if(self.status==='pending'){ //这里面的self不能用this替代，因为是回调执行的时候不是在类里面所以这里的this不是类函数
　　　　　　self.status='resolve';
　　　　　　self.value=value;
　　　　　　self.onResolvedCallbacks.forEach(item=>{item()})
　　　　}
　　}
　　function reject(reason){
　　　　if(self.status==='pending'){
　　　　　　self.status='reject';
　　　　　　self.reason=reason;
　　　　　　self.onRejectedCallbacks.forEach(item=>{item()})
　　　　}
　　}
　　try{
　　　　executor(resolve,reject);
　　}catch(e){
　　　　reject(e);
　　}
}
function resolvePromise(promise2,x,resolve,reject){
　　if(promise2===x){//自己等于自己，报类型错误
　　　　return reject(new TypeError('循环引用了'));
　　}
　　let called;//控制成功或失败只能调用一次
　　if(x!==null && (typeof x==='object'||typeof x==='function')){
　　　　try{
　　　　　　let then=x.then;
　　　　　　if(typeof then==='function'){
　　　　　　　　then.call(x,function(y){ //y可能还是一个promise,递归解析，直到返回普通值
　　　　　　　　　　if(called)return;
　　　　　　　　　　called=true;
　　　　　　　　　　resolvePromise(promise2,y,resolve,reject)
　　　　　　　　},function(err){
　　　　　　　　　　if(called)return;
　　　　　　　　　　called=true;
　　　　　　　　　　reject(err);
　　　　　　　　});
　　　　　　}else{
　　　　　　　　resolve(x);
　　　　　　}
　　　　} catch (e) {
　　　　　　if (called) return
　　　　　　called = true;
　　　　　　reject(e);
　　　　}
　　} else { // 说明是一个普通值
　　　　resolve(x);
　　}
}
Promise.prototype.then=function(onFufilled,onReject){
　　onFufilled=typeof onFufilled==='function'?onFufilled:function(value){
　　　　return value;
　　}
　　onReject=typeof onReject==='function'?onReject:function(err){
　　　　throw err;//抛出错误，才会走下个then的失败
　　}
　　let self=this;
　　let promise2;
　　if(self.status=='pending'){
　　　　promise2=new Promise(function(resolve,reject){
　　　　　　self.onResolvedCallbacks.push(function(){
　　　　　　　　setTimeout(function(){
　　　　　　　　　　try{
　　　　　　　　　　　　let x=onFufilled(self.value);
　　　　　　　　　　　　resolvePromise(promise2,x,resolve,reject);
　　　　　　　　　　}catch(e){
　　　　　　　　　　　　reject(e)
　　　　　　　　　　}
　　　　　　　　})
　　　　　　});
　　　　　　self.onRejectedCallbacks.push(function(){
　　　　　　　　setTimeout(function(){
　　　　　　　　　　try{
　　　　　　　　　　　　let x=onReject(self.reason);
　　　　　　　　　　　　resolvePromise(promise2,x,resolve,reject);
　　　　　　　　　　}catch(e){
　　　　　　　　　　　　reject(e);
　　　　　　　　　　}
　　　　　　　　})
　　　　　　});
　　　　})
　　}
　　if(self.status=='resolve'){
　　　　promise2=new Promise(function(resolve,reject){
　　　　setTimeout(function(){
　　　　　　try{
　　　　　　　　let x=onFufilled(self.value);
　　　　　　　　resolvePromise(promise2,x,resolve,reject);
　　　　　　}catch(e){
　　　　　　　　reject(e)
　　　　　　}
　　　　})
　　})
}
　　if(self.status=='reject'){
　　　　promise2=new Promise(function(resolve,reject){
　　　　　　setTimeout(function(){
　　　　　　　　try{
　　　　　　　　　　let x=onReject(self.reason);//这里的x可能是一个普通值，也可能是一个promise,所以写个方法统一处理。
　　　　　　　　　　resolvePromise(promise2,x,resolve,reject);
　　　　　　　　}catch(e){
　　　　　　　　　　reject(e);
　　　　　　　　}
　　　　　　})
　　　　})
　　}
　　return promise2;
};

四、检测一下我们的Promise是否符合Promise A+规范

我们需要先给Promise类增加一个defer方法，其实就是一个语法糖。

Promise.defer = Promise.deferred = function () {
    let dfd = {};
    dfd.promise = new Promise(function (resolve, reject) {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
    return dfd
}            

 

没有上面的语法糖，无法被检测。

下载一个插件npm install -g promises-aplus-tests

在命令行工具中执行命令：npm install -g promises-aplus-tests ./promise.js

即可检验自己的promise写的如何。

五、附赠Promise的all、race、resolve、reject、catch方法

 

Promise.all=function(promises){
//promises是一个promise的数组,同时需要返回一个promise
　　return new Promise(function(resolve,reject){
　　　　let arr=[]; //arr是最终返回值的结果集
　　　　let i=0;
　　　　function processData(index,y){
　　　　　　arr[index]=y;
　　　　　　if(++i===promises.length){
　　　　　　　　resolve(arr);
　　　　　　}
　　　　}
　　　　for(let i=0;i<promises.length;i++){ //因为then的时候，for循环已经走了，i值就是最大的，所以这里用let，保证每次i都是都是当前值
　　　　　　promises[i].then(function(y){
　　　　　　　　processData(i,y);
　　　　　　},function(err){
　　　　　　　　reject();
　　　　　　})
　　　　}
　　})
}

Promise.race=function(promises){
　　return new Promise(function(resolve,reject){
　　　　for(let i=0;i<promises.length;i++){
　　　　　　promises[i].then(function(data){
　　　　　　　　resolve(data);
　　　　　　},function(err){
　　　　　　　　reject(err);
　　　　　　})
　　　　}
　　})
}

Promise.resolve=function(value){
　　return new Promise(function(resolve,reject){
　　　　resolve(value);
　　})
}

Promise.reject=function(reason){
　　return new Promise(function(resolve,reject){
　　　　reject(reason);
　　})
}

 

Promise.prototype.catch = function (callback) {
　　return this.then(null, callback)
}