Promise 基本方法的簡單實現

程式設計三昧發表於2022-02-01
Promise

Promise.001

前言

Promise 是前端面試和工作中極其常見的一個概念，關於它各種方法的手寫實現也很有市場，今天在這裡總結一下 Promise 基本方法的簡單實現。

catch() 方法

catch 方法是對 then 方法的封裝，只用於接收 reject(reason) 中的錯誤資訊。

因為在 then 方法中 onRejected 引數是可不傳的，不傳的情況下，錯誤資訊會依次往後傳遞，直到有 onRejected 函式接收為止，因此在寫 promise 鏈式呼叫的時候， then 方法不傳 onRejected 函式，只需要在最末尾加一個 catch() 就可以了，這樣在該鏈條中的 promise 發生的錯誤都會被最後的 catch 捕獲到。

catch(onRejected) {
    return this.then(null, onRejected);
}

done() 方法

catch 在 promise 鏈式呼叫的末尾呼叫，用於捕獲鏈條中的錯誤資訊，但是 catch 方法內部也可能出現錯誤，所以有些 promise 實現中增加了一個方法 done 。

done 相當於提供了一個不會出錯的 catch 方法，並且不再返回一個 promise ，一般用來結束一個 promise 鏈。

done() {
    this.catch(reason => {
        console.log('done', reason);
        throw reason;
    });
}

finally() 方法

finally 方法用於無論是 resolve 還是 reject ， finall y的引數函式都會被執行。

finally(fn) {
    return this.then(value => {
        fn();
        return value;
    }, reason => {
        fn();
        throw reason;
    });
};

Promise.all() 方法

Promise.all 方法接收一個 promise 陣列，返回一個新 promise2 ，併發執行陣列中的全部 promise ，所有 promise 狀態都為 resolved 時， promise2 狀態為 resolved 並返回全部 promise 結果，結果順序和 promise 陣列順序一致。如果有一個 promise 為 rejected 狀態，則整個 promise2 進入 rejected 狀態。

static all(promiseList) {
    return new Promise((resolve, reject) => {
        const result = [];
        let i = 0;
        for (const p of promiseList) {
            p.then(value => {
                result[i] = value;
                if (result.length === promiseList.length) {
                    resolve(result);
                }
            }, reject);
            i++;
        }
    });
}

Promise.race() 方法

Promise.race 方法接收一個 promise 陣列, 返回一個新 promise2 ，順序執行陣列中的 promise ，有一個 promise 狀態確定， promise2 狀態即確定，並且同這個 promise 的狀態一致。

static race(promiseList) {
    return new Promise((resolve, reject) => {
        for (const p of promiseList) {
            p.then((value) => {
                resolve(value);
            }, reject);
        }
    });
}

Promise.resolve() 和 Promise.reject()

Promise.resolve 用來生成一個 rejected 完成態的 promise ， Promise.reject 用來生成一個 rejected 失敗態的 promise 。

static resolve(value) {
    let promise;

    promise = new Promise((resolve, reject) => {
        this.resolvePromise(promise, value, resolve, reject);
    });

    return promise;
}

static reject(reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
}

總結

常用的方法基本就這些， Promise 還有很多擴充套件方法，這裡就不一一展示，基本上都是對 then 方法的進一步封裝，只要你的 then 方法沒有問題，其他方法就都可以依賴 then 方法實現。

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章