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

Promises/A+

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

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

通常我們都會使用上述方法獲取 Promise 實例：在構造函數種傳入一個 executor 方法，當同步/異步的任務完成時調用 resolve，失敗時調用 reject，簡單易懂，在此不多贅述。

一個 Promise 可以理解為一個狀態機，相應的 API 接口要么用于改變狀態機的狀態，要么在到達某個狀態時被觸發，因此首先需要實現的是 Promise 的狀態信息：

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

并且只存在 PENDING => FULFILLED 或者 PENDING => REJECTED 的狀態轉移。

首先實現構造函數的框架如下：

class Promise {
    constructor(executor) {
        this.status = PENDING; // 實例當前的狀態
        this.data = undefined; // Promise 返回的值
        this.defered = []; // 回調函數集
        executor(resolve, reject); // 執行 executor 并傳入相應的參數
    }
}

上述代碼基本實現 Promise 構造函數的主題部分，但是存在三個問題：

resolve 和 reject 參數/方法尚未定義

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

考慮 executor 函數體中在調用 resolve/reject 時的 this 指向問題

修修補補如下：

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
    }
}

接下來實現 resolve 和 reject 方法，基本上就是在判斷狀態為 PENDING 之后把狀態改為相應的值，并把對應的 value 和 reason 存在 self 的 data 屬性上面，最后執行相應的回調函數，邏輯很簡單：

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 狀態確定后的回調，很明顯 then 方法需要寫在原型鏈上，Promise 總共有三種可能的狀態，在 then 方法中我們分別用三個判斷分支來處理，并且都分別返回一個新的 Promise 實例。

then(onResolved, onRejected) {
    // 如果 then 的參數不是 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
            });
    }
}

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

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
                });
            });
    }
}

至此實現一個簡易的 Promise，使用如下測試用例驗證：

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");

執行上面的代碼會發現輸出的順序是“1, 2, 3”，而不是正確的“3, 1, 2”，顯然是因為我們沒有在 Promise 的 resolve 方法中異步的調用回調函數集導致的，當然解決這個問題也很簡單，就是使用 setTimeout，但是這樣實現的話并不符合 Promise 在事件循環中的優先級，所以暫時忽略。

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

上面的代碼使用我們剛剛實現的 Promise 會打印 undefined，然而這并不是我們期望得到的結果，我們希望的是8這個值會穿過兩個 then 到達鏈尾的 then 的執行函數里，其輸出應該和這段代碼一致：

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

其實要實現這個功能十分簡單，只要把 then 的兩個參數的默認值做簡單的修改：

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