所有問題都可以通過加一層中間層來解決。

Promises/A+

簡易的，不做廢話直接開始 :)

const p = new Promise((resolve, reject)=>{ 
    // 如果操作成功則調(diào)用 resolve 并傳入 value
    // 如果操作失敗則調(diào)用 reject 并傳入 reason
});

通常我們都會使用上述方法獲取 Promise 實(shí)例：在構(gòu)造函數(shù)種傳入一個 executor 方法，當(dāng)同步/異步的任務(wù)完成時調(diào)用 resolve，失敗時調(diào)用 reject，簡單易懂，在此不多贅述。

一個 Promise 可以理解為一個狀態(tài)機(jī)，相應(yīng)的 API 接口要么用于改變狀態(tài)機(jī)的狀態(tài)，要么在到達(dá)某個狀態(tài)時被觸發(fā)，因此首先需要實(shí)現(xiàn)的是 Promise 的狀態(tài)信息：

const PENDING = 0
const FULFILLED = 1
const REJECTED = 2

并且只存在 PENDING => FULFILLED 或者 PENDING => REJECTED 的狀態(tài)轉(zhuǎn)移。

首先實(shí)現(xiàn)構(gòu)造函數(shù)的框架如下：

class Promise {
    constructor(executor) {
        this.status = PENDING; // 實(shí)例當(dāng)前的狀態(tài)
        this.data = undefined; // Promise 返回的值
        this.defered = []; // 回調(diào)函數(shù)集
        executor(resolve, reject); // 執(zhí)行 executor 并傳入相應(yīng)的參數(shù)
    }
}

上述代碼基本實(shí)現(xiàn) Promise 構(gòu)造函數(shù)的主題部分，但是存在三個問題：

resolve 和 reject 參數(shù)/方法尚未定義

executor 函數(shù)體中可能會拋出異常，需要做容錯處理

考慮 executor 函數(shù)體中在調(diào)用 resolve/reject 時的 this 指向問題

修修補(bǔ)補(bǔ)如下：

class Promise {
    constructor(executor) {
        this.status = PENDING;
        this.data = undefined;
        this.defered = [];

        try {
            // bind, bind, bind!
            executor(this.resolve.bind(this), this.reject.bind(this));
        } catch (e) {
            this.reject(e);
        }
    }

    resolve(value) {
        // TODO
    }

    reject(reason) {
        // TODO
    }
}

接下來實(shí)現(xiàn) resolve 和 reject 方法，基本上就是在判斷狀態(tài)為 PENDING 之后把狀態(tài)改為相應(yīng)的值，并把對應(yīng)的 value 和 reason 存在 self 的 data 屬性上面，最后執(zhí)行相應(yīng)的回調(diào)函數(shù)，邏輯很簡單：

resolve(value) {
    if (this.status === PENDING) {
        this.status = FULFILLED;
        this.data = value;
        this.defered.forEach(i => i.onfulfiled(value));
    }
}

reject(reason) {
    if (this.status === PENDING) {
        this.status = REJECTED;
        this.data = reason;
        this.defered.forEach(i => i.onrejected(reason));
    }
}

Promise 對象有一個 then 方法，用來注冊在這個 Promise 狀態(tài)確定后的回調(diào)，很明顯 then 方法需要寫在原型鏈上，Promise 總共有三種可能的狀態(tài)，在 then 方法中我們分別用三個判斷分支來處理，并且都分別返回一個新的 Promise 實(shí)例。

then(onResolved, onRejected) {
    // 如果 then 的參數(shù)不是 function 則我們需要忽略它
    onResolved = typeof onResolved === "function" ? onResolved : function(v) {};
    onRejected = typeof onRejected === "function" ? onRejected : function(r) {};

    switch (this.status) {
        case FULFILLED:
            return new Promise((resolve, reject) => {
                // TODO
            });

        case REJECTED:
            return new Promise((resolve, reject) => {
                // TODO
            });

        case PENDING:
            return new Promise((resolve, reject) => {
                // TODO
            });
    }
}

完整的實(shí)現(xiàn)如下，其中需要注意的是，如果 onResolved 的返回值是一個 Promise 對象，則直接取它的結(jié)果做為新的 Promise 實(shí)例的結(jié)果：

then(onResolved, onRejected) {
    onResolved = typeof onResolved === "function" ? onResolved : function(v) {};
    onRejected = typeof onRejected === "function" ? onRejected : function(r) {};

    switch (this.status) {
        case FULFILLED:
            return new Promise((resolve, reject) => {
                try {
                    const r = onResolved(this.data);
                    r instanceof Promise && r.then(resolve, reject);
                    resolve(r);
                } catch (e) {
                    reject(e);
                }
            });

        case REJECTED:
            return new Promise((resolve, reject) => {
                try {
                    const r = onRejected(this.data);
                    r instanceof Promise && r.then(resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });

        case PENDING:
            return new Promise((resolve, reject) => {
                const onfulfiled = () => {
                    try {
                        const r = onResolved(this.data);
                        r instanceof Promise && r.then(resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                };

                const onrejected = () => {
                    try {
                        const r = onRejected(this.data);
                        r instanceof Promise && r.then(resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                };

                this.defered.push({
                    onfulfiled,
                    onrejected
                });
            });
    }
}

至此實(shí)現(xiàn)一個簡易的 Promise，使用如下測試用例驗(yàn)證：

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
    }, 1000);
}).then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2);
        }, 1000);
    });
}).then((res) => {
    console.log(res);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(3);
        }, 1000);
    });
}).then((res) => {
    console.log(res);
});

// 1
// 2
// 3
// [Finished in 3.1s]

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

console.log("3");

執(zhí)行上面的代碼會發(fā)現(xiàn)輸出的順序是“1, 2, 3”，而不是正確的“3, 1, 2”，顯然是因?yàn)槲覀儧]有在 Promise 的 resolve 方法中異步的調(diào)用回調(diào)函數(shù)集導(dǎo)致的，當(dāng)然解決這個問題也很簡單，就是使用 setTimeout，但是這樣實(shí)現(xiàn)的話并不符合 Promise 在事件循環(huán)中的優(yōu)先級，所以暫時忽略。

new Promise((resolve) => {
        resolve(8);
    })
    .then()
    .then()
    .then((value) => {
        console.log(value)
    });

上面的代碼使用我們剛剛實(shí)現(xiàn)的 Promise 會打印 undefined，然而這并不是我們期望得到的結(jié)果，我們希望的是8這個值會穿過兩個 then 到達(dá)鏈尾的 then 的執(zhí)行函數(shù)里，其輸出應(yīng)該和這段代碼一致：

new Promise((resolve) => {
        resolve(8);
    })
    .then((value) => {
        return value;
    })
    .then((value) => {
        return value;
    })
    .then((value) => {
        console.log(value);
    });

其實(shí)要實(shí)現(xiàn)這個功能十分簡單，只要把 then 的兩個參數(shù)的默認(rèn)值做簡單的修改：

onResolved = typeof onResolved === "function" ? onResolved : function(v) { return v; };
onRejected = typeof onRejected === "function" ? onRejected : function(r) { return r; };