原生es5封裝的Promise對象

時間  2019-12-07
標籤 原生 es5 封裝 promise 對象 欄目 軟件設計 简体版
原文   原文鏈接

前言

前一陣看了一些關於JS異步操做的文章，發現Promise真是個好東西，配合Generator或者async/await使用更有奇效。完美解決異步代碼書寫的回調問題，有助於書寫更優雅的異步代碼。花了幾天時間研究了Promise的工做機制，手癢癢用es6語法封裝了一個Promise對象，基本實現了原生Promise的功能，如今，用es5語法再寫一遍。javascript

更新說明

  • 更新時間：2019/1/23

經@logbn520兄弟的提醒，我把then方法的執行作成同步的了，是不符合規範的。html

《Promises/A+規範》中，【Then 方法】小節【調用時機】部分寫道：「onFulfilled 和 onRejected 只有在執行環境堆棧僅包含平臺代碼時纔可被調用」，這裏特別要看一下注釋。java

所以我要把onFulfilled 和 onRejected 的代碼放在「 then 方法被調用的那一輪事件循環以後的新執行棧中執行」，經過setTimeout方法將任務放到本輪任務隊列的末尾。代碼已添加到最後一部分-第九步。git

關於任務隊列的運行機制，感興趣可看一下阮一峯老師的《JavaScript 運行機制詳解：再談Event Loop》es6

實現功能：

  • 已實現 Promise 基本功能，與原生同樣，異步、同步操做均ok，具體包括：
    • MyPromise.prototype.then()
    • MyPromise.prototype.catch() 與原生 Promise 略有出入
    • MyPromise.prototype.finally()
    • MyPromise.all()
    • MyPromise.race()
    • MyPromise.resolve()
    • MyPromise.reject()
  • rejected 狀態的冒泡處理也已解決，當前Promise的reject若是沒有捕獲，會一直冒泡到最後，直到catch
  • MyPromise 狀態一旦改變，將不能再改變它的狀態

不足之處：

  • 代碼的錯誤被catch捕獲時，提示的信息（捕獲的錯誤對象）比原生Promise要多

測試： index.html

  • 這個頁面中包含了30個測試例子，分別測試了各項功能、各個方法，還有一些特殊狀況測試；或許還有有遺漏的，感興趣本身能夠玩一下；
  • 更加友好的可視化的操做，方便測試，每次運行一個例子，右邊面板可看到結果；
  • 自定義了console.mylog()方法用來輸出結果，第一個參數是當前使用的Promise對象，用以區分輸出，查看代碼時可忽略，後面的參數都是輸出結果，與系統console.log()類似；
  • 建議同時打開 index.js 邊看代碼邊玩；
  • 同一套代碼，上面的 MyPromise 的運行結果，下面是原生 Promise 運行的結果；

收穫

  • 再寫一遍又有新收穫，寫的更順了，理解更深入了；
  • then/catch方法是最難的，要不停地修修補補；
  • reject狀態的冒泡是個難題，但在下面的代碼中我沒有專門說起，我也沒有辦法具體說清楚他，我是在整個過程當中不停地調才最終調出來正確的冒泡結果。

代碼

下面貼代碼，包括整個思考過程，會有點長
爲了說明書寫的邏輯，我使用如下幾個註釋標識，整坨變更的代碼只標識這一坨的開頭處。
//++ ——添加的代碼
//-+ ——修改的代碼github

第一步，基礎功能實現

名字隨便取，個人叫MyPromise，沒有取代原生的Promise。segmentfault

  • 構造函數傳入回調函數 callback 。當新建 MyPromise 對象時，咱們須要運行此回調，而且 callback 自身也有兩個參數，分別是 resolver 和 rejecter ，他們也是回調函數的形式；
  • 定義了幾個變量保存當前的一些結果與狀態、事件隊列，見註釋；
  • 執行函數 callback 時，若是是 resolve 狀態，將結果保存在 this.__succ_res 中，狀態標記爲成功；若是是 reject 狀態，操做相似；
  • 同時定義了最經常使用的 then 方法，是一個原型方法；
  • 執行 then 方法時，判斷對象的狀態是成功仍是失敗，分別執行對應的回調，把結果傳入回調處理。
//幾個狀態常量
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

function MyPromise(callback) {
    this.status = PENDING; //儲存狀態
    this.__succ__res = null; //儲存resolve結果
    this.__err__res = null; //儲存reject結果
    var _this = this;//必須處理this的指向
    function resolver(res) {
        _this.status = FULFILLED;
        _this.__succ__res = res;
    };
    function rejecter(rej) {
        _this.status = REJECTED;
        _this.__err__res = rej;
    };
    callback(resolver, rejecter);
};
MyPromise.prototype.then = function(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
        onFulfilled(this.__succ__res);
    } else if (this.status === REJECTED) {
        onRejected(this.__err__res);
    };
};
複製代碼

到這裏，MyPromise 能夠簡單實現一些同步代碼，好比：數組

new MyPromise((resolve, reject) => {
    resolve(1);
}).then(res => {
    console.log(res);
});
//結果 1
複製代碼

第二步，加入異步處理

執行異步代碼時，then 方法會先於異步結果執行，上面的處理還沒法獲取到結果。promise

  • 首先，既然是異步，then 方法在 pending 狀態時就執行了，因此添加一個 else ；
  • 執行 else 時，咱們尚未結果，只能把須要執行的回調，放到一個隊列裏，等須要時執行它，因此定義了一個新變量 this.__queue 保存事件隊列；
  • 當異步代碼執行完畢，這時候把 this.__queue 隊列裏的回調通通執行一遍，若是是 resolve 狀態，則執行對應的 resolve 代碼。
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

function MyPromise(callback) {
    this.status = PENDING; //儲存狀態
    this.__succ__res = null; //儲存resolve結果
    this.__err__res = null; //儲存reject結果
    this.__queue = []; //++ 事件隊列

    var _this = this;
    function resolver(res) {
        _this.status = FULFILLED;
        _this.__succ__res = res;
        _this.__queue.forEach(item => {//++ 隊列中事件的執行
            item.resolve(res);
        });
    };
    function rejecter(rej) {
        _this.status = REJECTED;
        _this.__err__res = rej;
        _this.__queue.forEach(item => {//++ 隊列中事件的執行
            item.reject(rej);
        });
    };
    callback(resolver, rejecter);
};

MyPromise.prototype.then = function(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
        onFulfilled(this.__succ__res);
    } else if (this.status === REJECTED) {
        onRejected(this.__err__res);
    } else {//++ pending狀態，添加隊列事件
        this.__queue.push({resolve: onFulfilled, reject: onRejected});
    };
};
複製代碼

到這一步，MyPromise 已經能夠實現一些簡單的異步代碼了。測試用例 index.html 中，這兩個例子已經能夠實現了。網絡

  • 1 異步測試--resolve
  • 2 異步測試--reject

第三步，加入鏈式調用

實際上，原生的 Promise 對象的then方法，返回的也是一個 Promise 對象，一個新的 Promise 對象，這樣才能夠支持鏈式調用，一直then下去。。。 並且，then方法能夠接收到上一個then方法處理return的結果。根據Promise的特性分析，這個返回結果有3種可能：

  1. MyPromise對象；
  2. 具備then方法的對象；
  3. 其餘值。 根據這三種狀況分別處理。
  • 第一個處理的是，then方法返回一個MyPromise對象，它的回調函數接收resFn和 rejFn 兩個回調函數；
  • 把成功狀態的處理代碼封裝爲handleFulfilled函數，接受成功的結果做爲參數；
  • handleFulfilled函數中，根據onFulfilled返回值的不一樣，作不一樣的處理：
    • 首先，先獲取onFulfilled的返回值（若是有），保存爲returnVal；
    • 而後，判斷returnVal是否有then方法，即包括上面討論的一、2中狀況（它是MyPromise對象，或者具備then方法的其餘對象），對咱們來講都是同樣的；
    • 以後，若是有then方法，立刻調用其then方法，分別把成功、失敗的結果丟給新MyPromise對象的回調函數；沒有則結果傳給resFn回調函數。

reject狀態的鏈式調用的處理思路是相似的，在定義的handleRejected函數中，檢查onRejected返回的結果是否含then方法，分開處理。值得一提的是，若是返回的是普通值，應該調用的是resFn，而不是rejFn，由於這個返回值屬於新MyPromise對象，它的狀態不因當前MyPromise對象的狀態而肯定。便是，返回了普通值，未代表reject狀態，咱們默認爲resolve狀態。

MyPromise.prototype.then = function(onFulfilled, onRejected) {
    var _this = this;
    return new MyPromise(function(resFn, rejFn) {
        if (_this.status === FULFILLED) {
            handleFulfilled(_this.__succ__res);     // -+
        } else if (_this.status === REJECTED) {
            handleRejected(_this.__err__res);       // -+
        } else {//pending狀態
            _this.__queue.push({resolve: handleFulfilled, reject: handleRejected}); // -+
        };

        function handleFulfilled(value) {   // ++ FULFILLED 狀態回調
            // 取決於onFulfilled的返回值
            var returnVal = onFulfilled instanceof Function && onFulfilled(value) || value;
            if (returnVal['then'] instanceof Function) {
                returnVal.then(function(res) {
                    resFn(res);
                },function(rej) {
                    rejFn(rej);
                });
            } else {
                resFn(returnVal);
            };
        };
        function handleRejected(reason) {   // ++ REJECTED 狀態回調
            if (onRejected instanceof Function) {
                var returnVal = onRejected(reason);
                if (typeof returnVal !== 'undefined' && returnVal['then'] instanceof Function) {
                    returnVal.then(function(res) {
                        resFn(res);
                    },function(rej) {
                        rejFn(rej);
                    });
                } else {
                    resFn(returnVal);
                };
            } else {
                rejFn(reason)
            }
        }

    })
};
複製代碼

如今，MyPromise對象已經很好地支持鏈式調用了，測試例子：

  • 4 鏈式調用--resolve
  • 5 鏈式調用--reject
  • 28 then回調返回Promise對象（reject）
  • 29 then方法reject回調返回Promise對象

第四步，MyPromise.resolve()和MyPromise.reject()方法實現

由於其它方法對MyPromise.resolve()方法有依賴，因此先實現這個方法。
先要徹底弄懂MyPromise.resolve()方法的特性，研究了阮一峯老師的ECMAScript 6 入門對於MyPromise.resolve()方法的描述部分。 由此得知，這個方法功能很簡單，就是把參數轉換成一個MyPromise對象，關鍵點在於參數的形式，分別有：

  • 參數是一個 MyPromise 實例；
  • 參數是一個thenable對象；
  • 參數不是具備then方法的對象，或根本就不是對象；
  • 不帶有任何參數。

處理的思路是：

  • 首先考慮極端狀況，參數是undefined或者null的狀況，直接處理原值傳遞；
  • 其次，參數是MyPromise實例時，無需處理；
  • 而後，參數是其它thenable對象的話，調用其then方法，把相應的值傳遞給新MyPromise對象的回調；
  • 最後，就是普通值的處理。

MyPromise.reject()方法相對簡單不少。與MyPromise.resolve()方法不一樣，MyPromise.reject()方法的參數，會原封不動地做爲reject的理由，變成後續方法的參數。

MyPromise.resolve = function(arg) {
    if (typeof arg === 'undefined' || arg === null) {   //undefined 或者 null
        return new MyPromise(function(resolve) {
            resolve(arg);
        });
    } else if (arg instanceof MyPromise) {      // 參數是MyPromise實例
        return arg;
    } else if (arg['then'] instanceof Function) {   // 參數是thenable對象
        return new MyPromise(function(resolve, reject) {
            arg.then(function (res) {
                resolve(res);
            }, function (rej) {
                reject(rej);
            });
        });
    } else {    // 其餘值
        return new MyPromise(function (resolve) {
            resolve(arg);
        });
    };
};
MyPromise.reject = function(arg) {
    return  new MyPromise(function(resolve, reject) {
        reject(arg);
    });
};
複製代碼

測試用例有8個：18-25，感興趣能夠玩一下。

第五步，MyPromise.all()和MyPromise.race()方法實現

MyPromise.all()方法接收一堆MyPromise對象，當他們都成功時，才執行回調。依賴MyPromise.resolve()方法把不是MyPromise的參數轉爲MyPromise對象。
每一個對象執行then方法，把結果存到一個數組中，當他們都執行完畢後，即i === arr.length，才調用resolve()回調，把結果傳進去。
MyPromise.race()方法也相似，區別在於，這裏作的是一個done標識，若是其中之一改變了狀態，再也不接受其餘改變。

MyPromise.all = function(arr) {
    if (!Array.isArray(arr)) {
        throw new TypeError('參數應該是一個數組!');
    };
    return new MyPromise(function(resolve, reject) {
        var i = 0, result = [];
        next();
        function next() {
            // 對於不是MyPromise實例的進行轉換
            MyPromise.resolve(arr[i]).then(function (res) {
                result.push(res);
                i++;
                if (i === arr.length) {
                    resolve(result);
                } else {
                    next();
                };
            }, reject);
        }
    })
};
MyPromise.race =  function(arr) {
    if (!Array.isArray(arr)) {
        throw new TypeError('參數應該是一個數組!');
    };
    return new MyPromise(function(resolve, reject) {
        let done = false;
        arr.forEach(function(item) {
            MyPromise.resolve(item).then(function (res) {
                if (!done) {
                    resolve(res);
                    done = true;
                };
            }, function(rej) {
                if (!done) {
                    reject(rej);
                    done = true;
                };
            });
        })
    });
};
複製代碼

測試用例：

  • 6 all方法
  • 26 race方法測試

第六步，Promise.prototype.catch()和Promise.prototype.finally()方法實現

他們倆本質上是then方法的一種延伸，特殊狀況的處理。

MyPromise.prototype.catch = function(errHandler) {
    return this.then(undefined, errHandler);
};
MyPromise.prototype.finally = function(finalHandler) {
    return this.then(finalHandler, finalHandler);
};
複製代碼

測試用例：

  • 7 catch測試
  • 16 finally測試——異步代碼錯誤
  • 17 finally測試——同步代碼錯誤

第七步，代碼錯誤的捕獲

目前而言，咱們的catch還不具有捕獲代碼報錯的能力。思考，錯誤的代碼來自於哪裏？確定是使用者的代碼，2個來源分別有：

  • MyPromise對象構造函數回調
  • then方法的2個回調 捕獲代碼運行錯誤的方法是原生的try...catch...，因此我用它來包裹這些回調運行，捕獲到的錯誤進行相應處理。
function MyPromise(callback) {
    this.status = PENDING; //儲存狀態
    this.__succ__res = null; //儲存resolve結果
    this.__err__res = null; //儲存reject結果
    this.__queue = []; //事件隊列

    var _this = this;
    function resolver(res) {
        _this.status = FULFILLED;
        _this.__succ__res = res;
        _this.__queue.forEach(item => {
            item.resolve(res);
        });
    };
    function rejecter(rej) {
        _this.status = REJECTED;
        _this.__err__res = rej;
        _this.__queue.forEach(item => {
            item.reject(rej);
        });
    };
    try {   // -+ 在try……catch……中運行回調函數
        callback(resolver, rejecter);
    } catch (err) {
        this.__err__res = err;
        this.status = REJECTED;
        this.__queue.forEach(function(item) {
            item.reject(err);
        });
    };
};

MyPromise.prototype.then = function(onFulfilled, onRejected) {
    var _this = this;
    return new MyPromise(function(resFn, rejFn) {
        if (_this.status === FULFILLED) {
            handleFulfilled(_this.__succ__res);
        } else if (_this.status === REJECTED) {
            handleRejected(_this.__err__res);
        } else {//pending狀態
            _this.__queue.push({resolve: handleFulfilled, reject: handleRejected});
        };

        function handleFulfilled(value) {
            var returnVal = value;
            // 獲取 onFulfilled 函數的返回結果
            if (onFulfilled instanceof Function) {
                try {       // -+ 在try……catch……中運行onFulfilled回調函數
                    returnVal = onFulfilled(value);
                } catch (err) { // 代碼錯誤處理
                    rejFn(err);
                    return;
                };
            };

            if (returnVal && returnVal['then'] instanceof Function) {
                returnVal.then(function(res) {
                    resFn(res);
                },function(rej) {
                    rejFn(rej);
                });
            } else {
                resFn(returnVal);
            };
        };
        function handleRejected(reason) {
            if (onRejected instanceof Function) {
                var returnVal
                try {// -+ 在try……catch……中運行onRejected回調函數
                    returnVal = onRejected(reason);
                } catch (err) {
                    rejFn(err);
                    return;
                };
                if (typeof returnVal !== 'undefined' && returnVal['then'] instanceof Function) {
                    returnVal.then(function(res) {
                        resFn(res);
                    },function(rej) {
                        rejFn(rej);
                    });
                } else {
                    resFn(returnVal);
                };
            } else {
                rejFn(reason)
            }
        }

    })
};
複製代碼

測試用例：

  • 11 catch測試——代碼錯誤捕獲
  • 12 catch測試——代碼錯誤捕獲（異步）
  • 13 catch測試——then回調代碼錯誤捕獲
  • 14 catch測試——代碼錯誤catch捕獲

其中第12個異步代碼錯誤測試，結果顯示是直接報錯，沒有捕獲錯誤，原生的Promise也是這樣的，我有點不能理解爲啥不捕獲處理它。

在這裏插入圖片描述

第八步，處理MyPromise狀態肯定不容許再次改變

這是Promise的一個關鍵特性，處理起來不難，在執行回調時加入狀態判斷，若是已是成功或者失敗狀態，則不運行回調代碼。

function MyPromise(callback) {
    //略……

    var _this = this;
    function resolver(res) {
        if (_this.status === PENDING) {
            _this.status = FULFILLED;
            _this.__succ__res = res;
            _this.__queue.forEach(item => {
                item.resolve(res);
            });
        };
    };
    function rejecter(rej) {
        if (_this.status === PENDING) {
            _this.status = REJECTED;
            _this.__err__res = rej;
            _this.__queue.forEach(item => {
                item.reject(rej);
            });
        };
    };
    
    //略……
};
複製代碼

測試用例：

  • 27 Promise狀態屢次改變

第九步，onFulfilled 和 onRejected 方法異步執行

到這裏爲止，若是執行下面一段代碼，

function test30() {
  function fn30(resolve, reject) {
      console.log('running fn30');
      resolve('resolve @fn30')
  };
  console.log('start');
  let p = new MyPromise(fn30);
  p.then(res => {
      console.log(res);
  }).catch(err => {
      console.log('err=', err);
  });
  console.log('end');
};
複製代碼

輸出結果是：

//MyPromise結果
// start
// running fn30
// resolve @fn30
// end

//原生Promise結果：
// start
// running fn30
// end
// resolve @fn30
複製代碼

兩個結果不同，由於onFulfilled 和 onRejected 方法不是異步執行的，須要作如下處理，將它們的代碼放到本輪任務隊列的末尾執行。

function MyPromise(callback) {
    //略……

    var _this = this;
    function resolver(res) {
        setTimeout(() => {      //++ 利用setTimeout調整任務執行隊列
            if (_this.status === PENDING) {
                _this.status = FULFILLED;
                _this.__succ__res = res;
                _this.__queue.forEach(item => {
                    item.resolve(res);
                });
            };            
        }, 0);
    };
    function rejecter(rej) {
        setTimeout(() => {      //++
            if (_this.status === PENDING) {
                _this.status = REJECTED;
                _this.__err__res = rej;
                _this.__queue.forEach(item => {
                    item.reject(rej);
                });
            };            
        }, 0);
    };
    
    //略……
};
複製代碼

測試用例：

  • 30 then方法的異步執行

以上，是我全部的代碼書寫思路、過程。完整代碼與測試代碼到github下載

參考文章

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程