摘要：本文同時也發(fā)布在我的博客上，歡迎之前也手寫過簡單的，這次則是為了通過官方的測試集，借鑒了一些下載量較多的，改了幾遍，終于是通過了規(guī)范的個測試用例如何測試測試庫地址在這，大家在寫完自己的后，不妨也去測試一下，檢驗自己的是否符合規(guī)范。

本文同時也發(fā)布在我的github博客上，歡迎star～

之前也手寫過簡單的promise，這次則是為了通過官方的Promise A+測試集，借鑒了一些下載量較多的promise polyfill，改了幾遍，終于是通過了A+規(guī)范的872個測試用例

測試庫地址在這：promises-tests ，大家在寫完自己的promise后，不妨也去測試一下，檢驗自己的promise是否符合Promise A+規(guī)范。這個庫使用起來很方便，像下面這樣就可以了：

const tests = require("promises-aplus-tests");
const Promise = require("./index");

const deferred = function() {
    let resolve, reject;
    const promise = new Promise(function(_resolve, _reject) {
        resolve = _resolve;
        reject = _reject;
    });
    return {
        promise: promise,
        resolve: resolve,
        reject: reject
    };
};
const adapter = {
    deferred
};
tests.mocha(adapter);

其中，index.js中是你寫的Promise

首先我們定義一些全局屬性：

const IS_ERROR = {};
let ERROR = null;

IS_ERROR作為發(fā)生錯誤時的標識，ERROR用來保存錯誤；

做好準備工作，再來定義_Promise類，其中fn是Promise接受的函數(shù)，構(gòu)造函數(shù)執(zhí)行時立刻調(diào)用；_status是Promise的狀態(tài)，初始為0（pending），resolved時為1，rejected時為2；_value用來保存Promise resolved時的返回值和rejected時的失敗信息；_handlers用來保存Promise成功和失敗時調(diào)用的處理方法

function _Promise(fn) {
    this._status = 0;
    this._value = null;
    this._handlers = [];
    doFn(this, fn);
}

最后執(zhí)行doFn方法，傳入this值和fn：

function doFn(self, fn) {
    const ret = safeCallTwo(
        fn,
        function(value) {
            self.resolve(value);
        },
        function(reason) {
            self.reject(reason);
        }
    );
    if (ret === IS_ERROR) {
        self.reject(ERROR);
    }
}

其中safeCallTwo是用來安全執(zhí)行兩參數(shù)方法的函數(shù)，當執(zhí)行出錯時，捕獲錯誤，保存在ERROR中，返回IS_ERROR標識：

function safeCallTwo(fn, arg1, arg2) {
    try {
        return fn(arg1, arg2);
    } catch (error) {
        ERROR = error;
        return IS_ERROR;
    }
}

在doFn中，調(diào)用safeCallTwo，fn傳入兩個參數(shù)供我們調(diào)用，也就是我們常用的resolve方法和reject方法，并獲取到返回值，如果ret為錯誤標識IS_ERROR，則調(diào)用reject

_Promise原型上掛載著resolve和reject方法，如下：

_Promise.prototype.resolve = function(value) {
    if (this._status !== 0) {
        return;
    }
    this._status = 1;
    this._value = value;
    doThen(this);
};
_Promise.prototype.reject = function(reason) {
    if (this._status !== 0) {
        return;
    }
    this._status = 2;
    this._value = reason;
    doThen(this);
};

因為Promise的狀態(tài)只能由pending轉(zhuǎn)為resolved和rejected，所以在執(zhí)行resolve和reject方法時，要先判斷status是否為0，若不為0，直接return；修改status和value后，執(zhí)行doThen方法:

function doThen(self) {
    const handlers = self._handlers;
    handlers.forEach(handler => {
        doHandler(self, handler);
    });
}

doThen函數(shù)的作用是從self上取出的handlers并依次執(zhí)行

我們再來看一看掛載在原型上的then方法：

_Promise.prototype.then = function(onResolve, onReject) {
    const res = new _Promise(function() {});
    preThen(this, onResolve, onReject, res);
    return res;
};

我們知道，Promise是支持鏈式調(diào)用的，所以我們的then方法也會返回一個Promise，以供后續(xù)調(diào)用；

下面是preThen方法：

function preThen(self, onResolve, onReject, res) {
    onResolve = typeof onResolve === "function" ? onResolve : null;
    onReject = typeof onReject === "function" ? onReject : null;
    const handler = {
        onResolve,
        onReject,
        promise: res
    };
    if (self._status === 0) {
        self._handlers.push(handler);
        return;
    }
    doHandler(self, handler);
}

preThen方法接受4個值，分別為當前Promise——self，resolve后的回調(diào)函數(shù)onResolve，reject后的回調(diào)函數(shù)onReject，then函數(shù)返回的promise——res。先判斷onResolve和onReject是否為函數(shù)，若不是，直接置為null。再將onResolve、onReject、res放入handler對象中

接下來需要注意，Promise接受的函數(shù)（也就是上文的fn）并不是一定是異步調(diào)用resolve和reject，也有可能是同步的，也就是說在執(zhí)行preThen函數(shù)時，self的status可能已經(jīng)不為0了，這時候我們就不需要將handler保存起來等待調(diào)用，而是直接調(diào)用回調(diào)函數(shù)

doHandler函數(shù)代碼見下：

function doHandler(self, handler) {
    setTimeout(() => {
        const { onReject, onResolve, promise } = handler;
        const { _status, _value } = self;
        const handlerFun = _status === 1 ? onResolve : onReject;
        if (handlerFun === null) {
            _status === 1 ? promise.resolve(_value) : promise.reject(_value);
            return;
        }
        const ret = safeCallOne(handlerFun, _value);
        if (ret === IS_ERROR) {
            promise.reject(ERROR);
            return;
        }
        promise.resolve(ret);
    });
}

我們知道，即使是同步執(zhí)行relove或者reject，then函數(shù)接受的回調(diào)函數(shù)也不會立刻同步執(zhí)行，如下代碼會依次輸出1，3，2，而非1，2，3

const p = new Promise(resolve => {
    console.log(1);
    resolve();
});
p.then(() => {
    console.log(2);
});
console.log(3);

在這里，我使用了setTimeout來模擬這種模式，當然，這只是一種粗糙的模擬，更好的方式是引入或?qū)崿F(xiàn)類似asap的庫（下個星期我可能會實現(xiàn)這個，哈哈），但setTimeout也足夠通過測試了

doHandler函數(shù)中，我們調(diào)用相應(yīng)的回調(diào)函數(shù)，需要注意的是，如果相應(yīng)回調(diào)函數(shù)為null（null是前文判斷回調(diào)函數(shù)不為function時統(tǒng)一賦值的），則直接調(diào)用then函數(shù)返回的promise的resolve或reject方法。

同樣，我們使用了safeCallOne來捕獲錯誤，這里不再贅述

到這里，我們執(zhí)行測試，發(fā)現(xiàn)不出意外地沒有通過，因為我們只是實現(xiàn)了基礎(chǔ)的Promise，還沒有實現(xiàn)resolve中的thenable功能，下面是mdn對于thenable的描述：

返回一個狀態(tài)由給定value決定的Promise對象。如果該值是thenable(即，帶有then方法的對象)，返回的Promise對象的最終狀態(tài)由then方法執(zhí)行決定；否則的話(該value為空，基本類型或者不帶then方法的對象),返回的Promise對象狀態(tài)為fulfilled，并且將該value傳遞給對應(yīng)的then方法。通常而言，如果你不知道一個值是否是Promise對象，使用Promise.resolve(value) 來返回一個Promise對象,這樣就能將該value以Promise對象形式使用

我們再來修改resolve方法：

_Promise.prototype.resolve = function(value) {
    if (this._status !== 0) {
        return;
    }
    if (this === value) {
        return this.reject(new TypeError("cant"s resolve itself"));
    }
    if (value && (typeof value === "function" || typeof value === "object")) {
        const then = getThen(value);
        if (then === IS_ERROR) {
            this.reject(ERROR);
            return;
        }
        if (value instanceof _Promise) {
            value.then(
                value => {
                    this.resolve(value);
                },
                reason => {
                    this.reject(reason);
                }
            );
            return;
        }
        if (typeof then === "function") {
            doFn(this, then.bind(value));
            return;
        }
    }
    this._status = 1;
    this._value = value;
    doThen(this);
};

先判斷this和value是否為一個Promise，若是一個，則拋出錯誤

再判斷value的類型是否為function或object，如果是，則實行g(shù)etThen方法進行錯誤捕獲：

function getThen(self) {
    try {
        return self.then;
    } catch (error) {
        ERROR = error;
        return IS_ERROR;
    }
}

若成功拿到then方法，檢測value instanceof _Promise，若為true，則直接采用value的狀態(tài)和value或者reason。

若then為function，則將then函數(shù)以value為this值，當作fn執(zhí)行，也就是達成下面代碼的效果：

const p = new Promise(resolve => {
    resolve({
        then: _resolve => {
            _resolve(1);
        }
    });
});
p.then(value => console.log(value)); //打印1

我們再次執(zhí)行測試，發(fā)現(xiàn)仍然有錯，其因出現(xiàn)在下面這種情況下：

const p = new _Promise(resolve => {
    resolve({
        then: _resolve => {
            setTimeout(() => _resolve(1)), 500;
        }
    });
    resolve(2);
});
p.then(value => console.log(value));

這個時候，使用我們的Promise，輸出的是2，而在規(guī)范中，應(yīng)當是輸出1

原因是我們在對象的then方法中是異步地resolve，這個時候，下面的resolve(2)在執(zhí)行時，status還沒有變，自然可以修改status和value

解決方法也很簡單，只用在doFn方法中判斷是否為第一次執(zhí)行即可：

function doFn(self, fn) {
    let done = false;
    const ret = safeCallTwo(
        fn,
        function(value) {
            if (done) {
                return;
            }
            done = true;
            self.resolve(value);
        },
        function(reason) {
            if (done) {
                return;
            }
            done = true;
            self.reject(reason);
        }
    );
    if (ret === IS_ERROR) {
        if (done) {
            return;
        }
        done = true;
        self.reject(ERROR);
    }
}

再執(zhí)行測試，發(fā)現(xiàn)已經(jīng)測試用例全部通過～

完整代碼已放在我的github上，地址為https://github.com/Bowen7/playground/tree/master/promise-polyfill ，可以clone我的playground項目，再到promise-polyfill目錄下npm install，然后執(zhí)行npm test即可運行測試