手寫Promise的相關方法

摘要

Promise 作為 JS 社群的異步解決方案，為開發者提供了

.then()

、

Promise.resolve()

、

Promise.reject()

等基本方法。除此之外，為了更友善地組合和控制多個的 Promise 執行個體，也提供了

.all()

、

.race()

等方法。

本文會在 Promise 的基本方法上，手動實作更進階的方法，來加深對 Promise 的了解：

• ?️ 實作

  Promise.all

• ?️ 實作

  Promise.race

• ?️ 實作

  Promise.any

• ?️ 實作

  Promise.allSettled

• ?️ 實作

  Promise.finally

實作 Promise.all

過程

Promise.all(iterators)

傳回一個新的 Promise 執行個體。iterators 中包含外界傳入的多個 promise 執行個體。

對于傳回的新的 Promise 執行個體，有以下兩種情況：

• 如果傳入的所有 promise 執行個體的狀态均變為

  fulfilled

  ，那麼傳回的 promise 執行個體的狀态就是

  fulfilled

  ，并且其 value 是 傳入的所有 promise 的 value 組成的數組。
• 如果有一個 promise 執行個體狀态變為了

  rejected

  ，那麼傳回的 promise 執行個體的狀态立即變為

  rejected

  。

代碼實作

實作思路：

• 傳入的參數不一定是數組對象，可以是”周遊器”
• 傳入的每個執行個體不一定是 promise，需要用

  Promise.resolve()

  包裝
• 借助”計數器”，标記是否所有的執行個體狀态均變為

  fulfilled

Promise.myAll = function(iterators) {
    const promises = Array.from(iterators);
    const num = promises.length;
    const resolvedList = new Array(num);
    let resolvedNum = 0;

    return new Promise((resolve, reject) => {
        promises.forEach((promise, index) => {
            Promise.resolve(promise)
                .then(value => {
                    // 儲存這個promise執行個體的value
                    resolvedList[index] = value;
                    // 通過計數器，标記是否所有執行個體均 fulfilled
                    if (++resolvedNum === num) {
                        resolve(resolvedList);
                    }
                })
                .catch(reject);
        });
    });
};           

複制

實作 Promise.race

過程

Promise.race(iterators)

的傳參和傳回值與

Promise.all

相同。但其傳回的 promise 的執行個體的狀态和 value，完全取決于：傳入的所有 promise 執行個體中，最先改變狀态那個（不論是

fulfilled

還是

rejected

）。

代碼實作

實作思路：

• 某傳入執行個體

  pending -> fulfilled

  時，其 value 就是

  Promise.race

  傳回的 promise 執行個體的 value
• 某傳入執行個體

  pending -> rejected

  時，其 error 就是

  Promise.race

  傳回的 promise 執行個體的 error

Promise.myRace = function(iterators) {
    const promises = Array.from(iterators);

    return new Promise((resolve, reject) => {
        promises.forEach((promise, index) => {
            Promise.resolve(promise)
                .then(resolve)
                .catch(reject);
        });
    });
};           

複制

實作 Promise.any

過程

Promise.any(iterators)

的傳參和傳回值與

Promise.all

相同。

如果傳入的執行個體中，有任一執行個體變為

fulfilled

，那麼它傳回的 promise 執行個體狀态立即變為

fulfilled

；如果所有執行個體均變為

rejected

，那麼它傳回的 promise 執行個體狀态為

rejected

。

⚠️

Promise.all

與

Promise.any

的關系，類似于，

Array.prototype.every

和

Array.prototype.some

的關系。

代碼實作

實作思路和

Promise.all

及其類似。不過由于對異步過程的處理邏輯不同，是以這裡的計數器用來辨別是否所有的執行個體均 rejected。

Promise.any = function(iterators) {
    const promises = Array.from(iterators);
    const num = promises.length;
    const rejectedList = new Array(num);
    let rejectedNum = 0;

    return new Promise((resolve, reject) => {
        promises.forEach((promise, index) => {
            Promise.resolve(promise)
                .then(value => resolve(value))
                .catch(error => {
                    rejectedList[index] = error;
                    if (++rejectedNum === num) {
                        reject(rejectedList);
                    }
                });
        });
    });
};           

複制

實作 Promise.allSettled

過程

Promise.allSettled(iterators)

的傳參和傳回值與

Promise.all

相同。

根據ES2020，此傳回的 promise 執行個體的狀态隻能是

fulfilled

。對于傳入的所有 promise 執行個體，會等待每個 promise 執行個體結束，并且傳回規定的資料格式。

如果傳入 a、b 兩個 promise 執行個體：a 變為 rejected，錯誤是 error1；b 變為 fulfilled，value 是 1。那麼

Promise.allSettled

傳回的 promise 執行個體的 value 就是：

[
    { status: "rejected", value: error1 },
    { status: "fulfilled", value: 1 }
];           

複制

代碼實作

實作中的計數器，用于統計所有傳入的 promise 執行個體。

const formatSettledResult = (success, value) =>
    success
        ? { status: "fulfilled", value }
        : { status: "rejected", reason: value };

Promise.allSettled = function(iterators) {
    const promises = Array.from(iterators);
    const num = promises.length;
    const settledList = new Array(num);
    let settledNum = 0;

    return new Promise(resolve => {
        promises.forEach((promise, index) => {
            Promise.resolve(promise)
                .then(value => {
                    settledList[index] = formatSettledResult(true, value);
                    if (++settledNum === num) {
                        resolve(settledList);
                    }
                })
                .catch(error => {
                    settledList[index] = formatSettledResult(false, error);
                    if (++settledNum === num) {
                        resolve(settledList);
                    }
                });
        });
    });
};           

複制

Promise.all、Promise.any 和 Promise.allSettled 中計數器使用對比

這三個方法均使用了計數器來進行異步流程控制，下面表格橫向對比不同方法中計數器的用途，來加強了解：

方法名	用途
Promise.all	标記 fulfilled 的執行個體個數
Promise.any	标記 rejected 的執行個體個數
Promise.allSettled	标記所有執行個體（fulfilled 和 rejected）的個數

實作 Promise.prototype.finally

過程

它就是一個文法糖，在目前 promise 執行個體執行完 then 或者 catch 後，均會觸發。

舉個例子，一個 promise 在 then 和 catch 中均要列印時間戳：

new Promise(resolve => {
    setTimeout(() => resolve(1), 1000);
})
    .then(value => console.log(Date.now()))
    .catch(error => console.log(Date.now()));           

複制

現在這段一定執行的共同邏輯，就可以用

finally

簡寫為：

new Promise(resolve => {
    setTimeout(() => resolve(1), 1000);
}).finally(() => console.log(Date.now()));           

複制

可以看出，

Promise.prototype.finally

的執行與 promise 執行個體的狀态無關，不依賴于 promise 的執行後傳回的結果值。其傳入的參數是函數對象。

代碼實作

實作思路：

• 考慮到 promise 的 resolver 可能是個異步函數，是以 finally 實作中，要通過調用執行個體上的 then 方法，添加 callback 邏輯
• 成功透傳 value，失敗透傳 error

Promise.prototype.finally = function(cb) {
    return this.then(
        value => Promise.resolve(cb()).then(() => value),
        error =>
            Promise.resolve(cb()).then(() => {
                throw error;
            })
    );
};           

複制