Promise——从阅读文档到简单实现（二）

摘要：在和方法执行的时候订阅事件，将自己的回调函数绑定到事件上，属性是发布者，一旦它的值发生改变就发布事件，执行回调函数。实现和方法的回调函数都是，当满足条件对象状态改变时，这些回调会被放入队列。所以我需要在某个变为时，删除它们绑定的回调函数。

按照文档说明简单地实现 ES6 Promise的各个方法并不难，但是Promise的一些特殊需求实现起来并不简单，我首先提出一些不好实现或者容易忽略的需求：

数据传递

回调绑定

将回调变成 microtask

实现 then/finally 返回的pending promise “跟随”它们的回调返回的pending promise

实现 resolve 返回的 promise “跟随”它的thenable对象参数

在解决上述问题前，我们先实现一个框架。
首先，我的目的是实现一个Promise插件，它包括：

构造函数：Promise

静态方法：resolve、reject、all 和 race

实例方法：then、catch 和 finally

私有函数：identity、thrower 和 isSettled 等

如下：

;(function() {
    function Promise(executor) {
    }
    
    Object.defineProperties(Promise, {
        resolve: {
            value: resolve,
            configurable: true,
            writable: true
        },
        reject: {
            value: reject,
            configurable: true,
            writable: true
        },
        race: {
            value: race,
            configurable: true,
            writable: true
        },
        all: {
            value: all,
            configurable: true,
            writable: true
        }
    });
    
    Promise.prototype = {
        constructor: Promise,
        
        then: function(onFulfilled, onRejected) {
        },
        
        catch: function(onRejected) {
        },
        
        finally: function(onFinally) {
        },
    }
    
    function identity(value) {
        return value;
    }
    
    function thrower(reason) {
        throw reason;
    }
    
    function isSettled(pro) {
        return pro instanceof Promise ? pro.status === "fulfilled" || pro.status === "rejected" : false;
    }
    
    window.Promise = Promise;
})();

接下来，我们解决各个问题。

为了传递数据——回调函数需要用到的参数以及 promise 的状态，我们首先在构造函数Promise中给新生成的对象添加status、value和reason属性，并且在构造函数中执行 executor 函数：

function Promise(executor) {
    var self = this;

    this.status = "pending";
    this.value = undefined;
    this.reason = undefined;

    typeof executor === "function" ? executor.call(null,
    function(value) {
        self.value = value;
        self.status = "fulfilled";
    },
    function(reason) {
        self.reason = reason;
        self.status = "rejected";
    }) : false;
}

我们将 value、reason 和 status 保存在 Promise 对象中，这样，我们就可以在 Promise 对象的方法中通过this（即 Promise 对象的引用）来访问这些数据，并将其用作回调函数的参数。

按照文档说明，为了实现链式调用，Promise的所有方法都会返回一个 Promise 对象，而且除了Promise.resolve(peomiseObj) 这种情况外都是新生成的 Promise 对象。所以接下来我的大部分方法都会返回一个新的 promise 对象。不生成新对象的特例：

var a = Promise.resolve("a"),
    b = Promise.resolve(a);
console.log(a === b)    //true

接下来，我们要将then、catch和finally中的回调方法绑定到Promise对象的状态改变这个事件上。
我想到的第一个事件就是onchange事件，但是 promiseObj.status 属性上并没有change事件。但是，我马上想到每次设置accessor属性的值时，就会调用 accessor 属性的setter方法。那么，我只要把status属性设置为存取属性，然后在它的 setter 方法里触发绑定的回调函数就行啦！如下：

function Promise(executor) {
    var self = this;

    //存储状态的私有属性
    this._status = "pending";

    this.value = undefined;
    this.reason = undefined;
    //this.events = new Events();

    //存储状态的公开属性
    Object.defineProperty(this, "status", {
        get: function() {
            return self._status;
        },
        set: function(newValue) {
            self._status = newValue;
            //self.events.fireEvent("change");
        },
        configurable: true
    });

    typeof executor === "function" ? executor.call(null,
    function(value) {
        self.value = value;
        self.status = "fulfilled";
    },
    function(reason) {
        self.reason = reason;
        self.status = "rejected";
    }) : false;
}

为了绑定回调函数，我使用了发布订阅模式。在then、catch和finally方法执行的时候订阅事件change，将自己的回调函数绑定到change事件上，promiseObj.status 属性是发布者，一旦它的值发生改变就发布change事件，执行回调函数。
为了节省篇幅，不那么重要的发布者Events() 构造函数及其原型我就不贴代码了，文章末尾我会给出源代码。

then、catch和finally方法的回调函数都是microtask，当满足条件（promise 对象状态改变）时，这些回调会被放入microtask队列。每当调用栈中的macrotask执行完毕时，立刻执行microtask队列中所有的microtask，这样一次事件循环就结束了，js引擎等待下一次循环。
要我实现microtask我是做不到的，我就只能用macrotask模仿一下microtask了。
我用 setTimeout 发布的macrotask进行模仿：

Object.defineProperty(this, "status", {
    get: function() {
        return self._status;
    },
    set: function(newValue) {
        self._status = newValue;
        setTimeout(() => {
            self.events.fireEvent("change");
        },
        0);
    },
    configurable: true
});

接下来，我们实现各个函数和方法。在知道方法的参数和返回值后再实现方法如有神助，而实现过程中最难处理的就是 pending 状态的 promise 对象，因为我们要等它变成其它状态时，再做真正的处理。下面我拿出两个最具代表性的方法来分析。

如果忘记了 Promise.all(iterable) 的参数和返回值，可以返回我上一篇文章查看。

function all(iterable) {
    //如果 iterable 不是一个可迭代对象
    if (iterable[Symbol.iterator] == undefined) {
        let err = new TypeError(typeof iterable + iterable + " is not iterable (cannot read property Symbol(Symbol.iterator))");
        return Promise.reject(err);
    }

    //如果 iterable 对象为空
    if (iterable.length === 0) {
        return Promise.resolve([]);
    }

    //其它情况用异步处理
    var pro = new Promise(),    //all 返回的 promise 对象
        valueArr = [];         //all 返回的 promise 对象的 value 属性
    setTimeout(function() {
        var index = 0,     //记录当前索引
        count = 0,
        len = iterable.length;

        for (let val of iterable) { -
            function(i) {
                if (val instanceof Promise) { //当前值为 Promise 对象时
                    if (val.status === "pending") {
                        val.then(function(value) {
                            valueArr[i] = value;
                            count++;
                            //Promise.all([new Promise(function(resolve){setTimeout(resolve, 100, 1)}), 2, 3, 4])
                            if (count === len) {
                                pro.value = valueArr;
                                pro.status = "fulfilled";
                            }
                        },
                        function(reason) {
                            pro.reason = reason;
                            pro.status = "rejected";
                            //当一个pending Promise首先完成时，解除其它 pending Promise的事件，防止之后其它 Promise 改变 pro 的状态
                            for (let uselessPromise of iterable) {
                                if (uselessPromise instanceof Promise && uselessPromise.status === "pending") {
                                    uselessPromise.events.removeEvent("change");
                                }
                            }
                        });
                    } else if (val.status === "rejected") {
                        pro.reason = val.reason;
                        pro.status = "rejected";
                        return;
                    } else {
                        //val.status === "fulfilled"
                        valueArr[i] = val.value;
                        count++;
                    }
                } else {
                    valueArr[i] = val;
                    count++;
                }
                index++;
            } (index);
        }

        //如果 iterable 对象中的 promise 对象都变为 fulfilled 状态，或者 iterable 对象内没有 promise 对象,
        //由于我们可能需要等待 pending promise 的结果，所以要额外花费一个变量计数，而不能用valueArr的长度判断。
        if (count === len) {
            pro.value = valueArr;
            pro.status = "fulfilled";
        }
    },
    0);

    return pro;
}

这里解释两点：

1、如何保证 value 数组中值的顺序
如果iterable对象中的 promise 对象都变为 fulfilled 状态，或者 iterable 对象内没有 promise 对象，all 返回一个 fulfilled promise 对象，且其 value 值为 iterable 中各项值组成的数组，数组中的值将会按照 iterable 内的顺序排列，而不是由 pending promise 的完成顺序决定。
为了保证 value 数组中值的顺序，最简单的方法是

valueArr[iterable.indexOf(val)] = val.value;

但是像除 Array、TypedArray 和 String 外的 Map 和 Set 原生 iterabe 对象，以及其它通过myIterable[Symbol.iterator] 创建的自定义的 iterable 对象都没有 indexOf 方法，所以我选择用闭包来保证 value 数组值的顺序。

2、处理 pending promise 对象。
pending promise 是导致这个函数要额外添加很多变量存储状态，额外做很多判断和处理的罪魁祸首。
如果 iterabe 对象中有一个pending状态的 promise（通常为一个异步的 promise），我们就使用then方法来持续关注它的动态。

一旦它变成fulfilledpromise，就将它的 value 加入 valueArr 数组。我们添加一个 count 变量记录目前 valueArr 获取到了多少个值，当全部获取到值后，就可以给 pro.value 和pro.status 赋值了。之所以用 count 而不是 valueArr.length 判断，是因为 valueArr = [undefined,undefined,undefined,1] 的长度也为4，这样可能导致还没获取到 pending promise 的值就改变 pro.status 了。

而当它变成rejectedpromise 时，我们就更新 all 方法返回的对象的 reason 值，同时改变状态 status 为 rejected，触发绑定的onrejected函数。另外，为了与原生 Promise 表现相同：如果 iterable 对象中任意一个 pending promise 对象状态变为 rejected，将不再持续关注其它 pending promise 的动态。而我早就在所有的 pending promise 上都绑定了 onfulfilled 和 onrejected 函数，用来跟踪它们。所以我需要在某个 pending promise 变为 rejected promise 时，删除它们绑定的回调函数。

Promise.prototype.then(onFulfilled, onRejected)：

Promise.prototype.then = function(onFulfilled, onRejected) {
    var pro = new Promise();

    //绑定回调函数，onFulfilled 和 onRejected 用一个回调函数处理
    this.events.addEvent("change", hander.bind(null, this));

    function hander(that) {
        var res; //onFulfilled 或 onRejected 回调函数执行后得到的结果
        try {
            if (that.status === "fulfilled") {
                //如果onFulfilled不是函数，它会在then方法内部被替换成一个 Identity 函数
                typeof onFulfilled !== "function" ? onFulfilled = identity: false;
                //将参数 this.value 传入 onFulfilled 并执行，将结果赋给 res
                res = onFulfilled.call(null, that.value);
            } else if (that.status === "rejected") {
                //如果onRejected不是函数，它会在then方法内部被替换成一个 Thrower 函数
                typeof onRejected !== "function" ? onRejected = thrower: false;

                res = onRejected.call(null, that.reason);
            }
        } catch(err) {
            //抛出一个错误，情况3
            pro.reason = err;
            pro.status = "rejected";

            return;
        }

        if (res instanceof Promise) {
            if (res.status === "fulfilled") {            //情况4
                pro.value = res.value;
                pro.status = "fulfilled";
            } else if (res.status === "rejected") {      //情况5
                pro.reason = res.reason;
                pro.status = "rejected";
            } else {                                     //情况6
                //res.status === "pending"时，pro 跟随 res
                pro.status = "pending";
                res.then(function(value) {
                    pro.value = value;
                    pro.status = "fulfilled";
                },
                function(reason) {
                    pro.reason = reason;
                    pro.status = "rejected";
                });
            }
        } else {
            //回调函数返回一个值或不返回任何内容，情况1、2
            pro.value = res;
            pro.status = "fulfilled";
        }
    }

    return pro;
};

我想我已经注释得很清楚了，可以对照我上一篇文章进行阅读。
我再说明一下pending promise 的“跟随”情况，和 all 方法的实现方式差不多，这里也是用 res.then来“跟随”的。我相信大家都看得懂代码，下面我举个例子来实践一下：

var fromCallback;

var fromThen = Promise.resolve("done")
.then(function onFulfilled(value) {
    fromCallback = new Promise(function(resolve){
        setTimeout(() => resolve(value), 0);    //未执行 setTimeout 的回调方法之前 fromCallback 为"pending"状态
    });
    return fromCallback;    //then 方法返回的 fromThen 将跟随 onFulfilled 方法返回的 fromCallback
});

setTimeout(function() {
    //目前已执行完 onFulfilled 回调函数，fromCallback 为"pending"状态，fromThen ‘跟随’ fromCallback
    console.log(fromCallback.status);    //fromCallback.status === "pending"
    console.log(fromThen.status);        //fromThen.status === "pending"
    setTimeout(function() {
        //目前已执行完 setTimeout 中的回调函数，fromCallback 为"fulfilled"状态，fromThen 也跟着变为"fulfilled"状态
        console.log(fromCallback.status + " " + fromCallback.value);    //fromCallback.status === "fulfilled"
        console.log(fromThen.status + " " + fromThen.value);        //fromThen.status === "fulfilled"
        console.log(fromCallback === fromThen);        //false
    }, 10);    //将这个 delay 参数改为 0 试试
}, 0);

看完这个例子，我相信大家都搞懂了then的回调函数返回 pending promise 时它会怎么处理了。
另外，这个例子也体现出我用 setTimeout 分发的macrotask模拟microtask的不足之处了，如果将倒数第二行的的 delay 参数改为 0，那么 fromThen.status === "pending"，这说明修改它状态的代码在 log 它状态的代码之后执行，至于原因大家自己想一下，这涉及到 event loop。

各位大侠请点下面的链接进行测试：
https://codepen.io/lyl123321/...

或者直接点这里查看源代码：
https://github.com/lyl123321/...
新增 Promise.try:
https://github.com/lyl123321/...