一步步写一个符合Promise/A+规范的库

Promise本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果。

ES6 中采用了 Promise/A+ 规范，Promise 实现之前，当然要先了解 Promise/A+ 规范，规范地址https://promisesaplus.com/。

我们根据 Promise/A+ 规范，可以写一个简单的Promise库。

每一步都尽量写的详细，所以代码很长很罗嗦。

1.实现Promise基本的方法

• Promise是一个类，需要传递一个executor函数，函数里有两个参数resolve和reject，调用resolve代表成功，调用reject代表失败
• Promise有三种状态：默认状态是等待状态pending，成功resolved，失败rejected

使用例子

let Promise = require('./Promise');
// Promise是一个类,需要传递一个executor函数,这个函数我们称之为执行函数,函数中有两个参数resolve和reject他们也是函数，调用resolve表示成功，调用reject表示失败
let promise = new Promise(function(resolve,reject){
    // 成功就不会再调用失败,默认状态是等待状态pending
    resolve('ok'); 
    reject('faild');
});
// then是原型上的一个方法接收两个参数分别是成功的回调和失败的回调
promise.then(function(data){// 调用resolve后会执行成功的回调，调用reject后会执行失败的回调
    console.log(data);
},function(err){
    console.log(err);
});

实现对应的Promise库代码

function Promise(executor) {  // Promise中需要接收一个执行函数executor
    let self = this;
    self.status = 'pending'; //默认是pending状态
    self.value = undefined; // 成功的原因
    self.reason = undefined; // 失败的原因
    function resolve(value) { // 调用resolve 会传入为什么成功
        if(self.status === 'pending'){ // 只有再pending才能转换成功态
            self.value = value; // 将成功的原因保存下来
            self.status = 'resolved'; // 状态改成成功态 
        }
    }
    function reject(reason) { // 调用reject会传入为什么失败
        if(self.status === 'pending'){
            self.reason = reason;
            self.status = 'rejected';
        }
    }
    try {
        executor(resolve, reject);// executor中需要传入resolve和reject
    } catch (e) {
        // 如果executor执行发生异常，表示当前的promise是失败态
        reject(e);
    }
}
// then中要传入成功的回调和失败的回调
Promise.prototype.then = function(onFufilled,onRejected){
    let self = this;
    // 如果要是成功就调用成功的回调,并将成功的值传入
    if(self.status === 'resolved'){
        onFufilled(self.value);
    }
    if(self.status === 'rejected'){
        onRejected(self.reason);
    }
}
module.exports = Promise

2.异步Promise

在new Promise时内部可以写异步代码，并且产生的实例可以then多次

• 用两个数组存放成功和失败的回调，当调用的时候再执行

使用例子

let Promise = require('./Promise');
let promise = new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve('ok');
    },1000)
});
// 当调用then时可能状态依然是pending状态,我们需要将then中的回调函数保留起来,当调用resolve或者reject时按照顺序执行
promise.then(function(data){
    console.log(data);
},function(err){
    console.log(err);
});
promise.then(function(data){
    console.log(data);
},function(err){
    console.log(err);
});

实现对应的Promise库代码

function Promise(executor) {  
     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());
         }
     }
     function reject(reason) {
         if(self.status === 'pending'){
             self.reason = reason;
             self.status = 'rejected';
+            // 依次执行失败的回调
+            self.onRejectedCallbacks.forEach(item=>item());
         }
     }
}
Promise.prototype.then = function(onFufilled,onRejected){
     if(self.status === 'rejected'){
         onRejected(self.reason);
     }
+    if(self.status === 'pending'){
+        // 如果是等待态,就将成功和失败的回调放到数组中
+        self.onResolvedCallbacks.push(function(){
+            onFufilled(self.value);
+        });
+        self.onRejectedCallbacks.push(function(){
+            onRejected(self.reason);
+        });
+    }
 }

3.Promise链式调用

• 如果当前promise已经进入成功的回调，回调中发生了异常返回this的话，那么当前的promise的状态无法更改到失败台！所以promise实现链式调用,返回的并不是this而是一个新的promise。

• 执行回调中

  • 如果返回的是一个普通的值，会将结果传入下一次then的成功回调中
  • 如果发生错误会被下一次then的失败回调捕获
  • 如果返回的是promise看这个promise是成功还是失败,对应调用下一次的then

所以写一个resolvePromise方法，这是promise中最重要的方法,用来解析then返回的结果

• 有些人可能成功失败同时调用，如果两个都调用，用第一个调用的，不允许同时调用。

使用例子

promise.then(function(data){
    throw Error('出错了');// 当前promise已经成功了，成功就不会再失败
    return 'renee' 
}).then(null,function(err){ // 如果返回的是同一个promise那么还怎么走向失败呢?所以必须要返回一个新的promise
    console.log(err);
})

实现对应的Promise库代码

 Promise.prototype.then = function(onFufilled,onRejected){
     let self = this;
+    let promise2; // promise2为then调用后返回的新promise
     // 如果要是成功就调用成功的回调,并将成功的值传入
     if(self.status === 'resolved'){
-        onFufilled(self.value);
+        promise2 = new Promise(function(resolve,reject){
+            try{
+                // 执行时有异常发生,需要将promise2的状态置为失败态
+                let x = onFufilled(self.value); 
+                // x为返回的结果
+                // 写一个方法resolvePromise，是对当前返回值进行解析,通过解析让promise2的状态转化成成功态还是失败态
+                resolvePromise(promise2,x,resolve,reject);
+            }catch(e){
+                reject(e);
+            }
+        })
     }
     if(self.status === 'rejected'){
-        onRejected(self.reason);
+        promise2 = new Promise(function(resolve,reject){
+            try{
+                let x = onRejected(self.reason);
+                resolvePromise(promise2,x,resolve,reject);
+            }catch(e){
+                reject(e)
+            }
+        })
     }
     if(self.status === 'pending'){
+       promise2 = new Promise(function(resolve,reject){
         self.onResolvedCallbacks.push(function(){
-            onFufilled(self.value);
+                try{
+                    let x = onFufilled(self.value);
+                    resolvePromise(promise2,x,resolve,reject)
+                }catch(e){
+                    reject(e);
+                }
+            })
         });
         self.onRejectedCallbacks.push(function(){
-            onRejected(self.reason);
+                try{
+                    let x = onRejected(self.reason);
+                    resolvePromise(promise2,x,resolve,reject)
+                }catch(e){
+                    reject(e);
+                }
         });
+       })
     }
+    return promise2;
 }

function resolvePromise(promise2, x, resolve, reject) {
    //x是返回的结果，如果promise和then中返回的promise是同一个，是不科学的，要报错
    if(promise2===x){
        return reject(new Error('循环引用'))
    }
    if(x!==null&&(typeof x === 'object'|| typeof x === 'function')){
        let called; //表示是否调用过成功或者失败
        try{
            let then=x.then;
            //如果then是函数，说明是promise，我们要让promise执行
            if(typeof then==='function'){
                then.call(x,function(y){
                    if(called)return; //如果调用过直接return
                    called=true;
                    //如果resolve的结果依旧是promise那就继续解析
                },function(err){
                    if(called) return;
                    called=true;
                    reject(err)
                })
            }else{//如果不是函数，x是一个普通的对象，直接成功即可
                resolve(x)
            }
        }catch(e){
            if(called) return;
            called=true;
            reject(e);
        }
    }else{
        //是普通值直接调用成功
        resolve(x);
    }
}

4.值的穿透

• 在规范中定义then函数可以不传参,不传参默认会将成功的结果和失败的结果继续向下传递

使用例子

promise.then().then().then(function(data){
  console.log(data)
})

实现对应的Promise库代码

Promise.prototype.then = function (onFufilled, onRejected) {
  //失败和成功默认不传给一个函数
+    onFufilled = typeof onFufilled === 'function'?onFufilled:function(value){
+        return value
+    }
+    onRejected = typeof onRejected === 'function'?onRejected:function(err){
+        throw err
+    }

5.测试

另外可以通过安装一个插件来对实现的promise进行规范测试。

npm(cnpm) i -g promises-aplus-tests
promises-aplus-tests 文件名