手写一款符合Promise/A+规范的Promise

摘要：手写一款符合规范的长篇预警有点长，可以选择性观看。初始状态是，状态可以有或者不能从转换为或者从转换成即只要由状态转换为其他状态后，状态就不可变更。

长篇预警！有点长，可以选择性观看。如果对Promise源码不是很清楚，还是推荐从头看，相信你认真从头看到尾，并且去实际操作了，肯定会有收获的。主要是代码部分有点多，不过好多都是重复的，不必担心

Promise的一些用法在此不多赘述，本篇主要带领你手写一个Promise源码，学完你就会发现：Promise没有你想象中的那么难

实现简单的同步Promise

增加异步功能

增加链式调用then

增加catch finally方法

增加all race 等方法

实现一个promise的延迟对象defer

最终测试

实现简单的同步Promise

先大概说一下基本概念：
Promise内部维护着三种状态，即pending,resolved和rejected。初始状态是pending，状态可以有pending--->relolved,或者pending--->rejected.不能从resolve转换为rejected 或者从rejected转换成resolved.
即 只要Promise由pending状态转换为其他状态后，状态就不可变更。
ok.知道了这些后，我们开始手撸代码：

注意观看序号 1 2 3 4 5 ...

function Promise(executor){
    let that = this;
    /** 2 定义初始的一些变量 */
    that.status = "pending";
    that.value = null;
    that.reason = null;
    
    /** 3 定义初始的成功和失败函数 */
    function resolve(value){
        /** 4 判断状态是不是初始状态pending 
         *    是就转换状态 否则不转换 
         *    确保状态的变化后的不可变性 */
        if(that.status === "pending"){
            that.status = "resolved";
            that.value = value;
        }
    }
    function reject(reason){
        /** 5 同上 */
        if(that.status === "pending"){
            that.status = "rejected";
            that.reason = reason;
        }
    }
    /**
     * 1 Promise中首先传了一个executor，它是一个函数
     *   executor函数中又传了两个函数，分别是resolve和reject
     *   很显然 resolve是成功回调，reject是失败的回调
     */
    executor(resolve,reject);
}

/** 6 在Promise原型上面定义then方法
 *    then方法上面有两个回调 一个是成功后的方法 另一个是失败后的方法
 *    根据成功或失败的状态去执行相关成功onFilfulled()或者失败onRejected()的回调方法
 */
Promise.prototype.then = function(onFilfulled,onRejected){
    let that = this;
    if(that.status === "resolved"){
        /** 7 如果状态已经变更为resolved 
         *    说明resolve方法已经被调用
         *    那么此时就执行成功的回调函数onFilfulled
         *    并传入参数 that.value
         * */
        onFilfulled(that.value);
    }
    if(that.status === "rejected"){
        /** 8 同上
         *    传入参数 that.reason
         */
        onRejected(that.reason);
    }
}

module.exports = Promise;

通过require()引入手撸的Promise

let Promise = require("./myPromise");

let p1 = ()=>{
    return new Promise((resolve,reject)=>{
        resolve("success.1");
    });
}

p1().then((data)=>{
    console.log(data); // 打印 success.1
},(err)=>{
    console.log(err);
});

ok.经调用发现 此代码可以实现部分Promise的功能，但仅仅是同步下才有效果。
那异步呢？ 别急这就来~：

增加异步功能

注意观看序号 1 2 3 4 5 ...

function Promise(executor){
    let that = this;
    that.status = "pending";
    that.value = null;
    that.reason = null;
    /** 1 因为异步不是立即执行 状态不会变更 成功或失败的回调函数也不会执行
     *    所以先定义好存放成功或失败回调函数的数组 
     *    以便将成功或失败的回调函数先保存起来
     * */
    that.onFilFulledCallbacks = [];
    that.onRejectedCallbacks = [];

    function resolve(value){
        if(that.status === "pending"){
            that.status = "resolved";
            that.value = value;
            /** 3 发布
             *    等待状态发生变更
             *    状态变更后 立即执行之前存放在相应数组中所有的成功或失败的回调函数
             *    即 发布
             */
            that.onFilFulledCallbacks.forEach((fn)=>{
                fn();
            });
        }
    }
    function reject(reason){
        if(that.status === "pending"){
            that.status = "rejected";
            that.reason = reason;
            /** 4 同上 */
            that.onRejectedCallbacks.forEach((fn)=>{
                fn();
            });
        }
    }
    executor(resolve,reject);
}

Promise.prototype.then = function(onFilfulled,onRejected){
    let that = this;
    if(that.status === "resolved"){
        onFilfulled(that.value);
    }
    if(that.status === "rejected"){
        onRejected(that.reason);
    }
    /** 2 订阅
     *    因为是异步 状态当时并没有立即变更 所以状态还是pending
     *    此时需要把成功或者失败的回调函数存放到对应的数组中
     *    等待状态变更时 再从数组中拿出来去执行
     *    即 订阅
     *    *存放数组时 为了执行时方便 需要把回调函数的外层包裹一层空函数
     */
    if(that.status === "pending"){
        that.onFilFulledCallbacks.push(function(){
            onFilfulled(that.value);
        });
    }
    if(that.status === "pending"){
        that.onRejectedCallbacks.push(function(){
            onRejected(that.reason);
        });
    }
}

module.exports = Promise;

代码测试：

let Promise = require("./myPromise");

let p1 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve("success.1");
            // reject("fail.");
        },1500);
    });
}

p1().then((data)=>{
    console.log(data); // success.1
},(err)=>{
    console.log(err);
});

可以看到 1.5s后 执行了resolve() 并打印了success.1，至此，我们实现了异步的Promise.其实这里的实现异步的思想就是发布订阅.

en～ok.高能预警