分步理解 Promise 的實現

時間  2019-11-18
標籤 理解 promise 實現 简体版
原文   原文鏈接

一個 Promise 的運用：node

var firstPromise = new Promise(function(resolve,reject){
    setTimeout(function(){
        var result = Math.random() <= 0.5 ? 1:0;
        if(result){
            resolve('resolved');
        }else{
            reject('rejected')
        }
    },1000)
})

var secondPromise = new Promise(function(resolve,reject){
    setTimeout(function(){
        var result = Math.random() <= 0.5 ? 1:0;
        if(result){
            resolve('resolved');
        }else{
            reject('rejected')
        }
    },2000)
})

firstPromise.then(function(value){ 
    console.log(value);
    return secondPromise;
},function(reason){
    console.log(reason);
    return secondPromise;
}).then(function(value){ 
    console.log(value);
},function(reason){
    console.log(reason);
})

//  1s後隨機輸出結果 resolved 或者 rejected
//  再1s後隨機輸出結果 resolved 或者 rejected

效果如上，在一個 promise 被完成/被拒絕時執行對應的回調取到異步結果。git

同時，以上代碼使用 promise 避免了回調地獄，規範了回調操做。es6

接下來，把 promise 拆成幾塊，學習一下怎麼樣的實現過程。github

步驟1、Promise 構造函數promise

建立 promise 對象的構造函數，是創造 promise 的工廠。瀏覽器

基礎要求：Promise 函數僅產生一個對象，避免大量變量的污染，將該藏好的對象/值藏好，該暴露的暴露；Promise 接收一個函數做爲參數，且該函數在構造 promise 對象時被執行；Promise 必須有個 .then 方法(後續方法可自行擴展)。dom

function Promise(fn){
    this.then = function(){ };
}

步驟2、初始化過程，處理參數fn異步

Promise 構造函數參數 fn 中傳入 resolve/reject；Promise 初始化的時候執行 fn 並在 promise 獲得最終結果後執行傳入的 resolve/reject ；resolve/reject 函數中執行 promise 中指定的完成/拒絕時回調函數，並以最終結果做爲參數。函數

function Promise(fn){

    // 完成時
    function resolve(value) {
        console.log('value ',value);
    }

    // 拒絕時
    function reject(reason) {
        console.log('reason ',reason);
    }

    // 執行傳入的fn
    function init(fn, onResolved, onRejected) {
        try {
            fn(function (value) {
                onResolved(value);
            }, function (reason) {
                onRejected(reason);
            })
        } catch (err) {
            onRejected(err);
        }
    }

    init(fn, resolve, reject);
    
    this.then = function(){ };
}

var promise = new Promise(function(resolve,reject){ 
    setTimeout(function(){
        var result = Math.random() <= 0.5 ? 1:0;
        if(result){
            resolve('resolved') 
        }else{
            reject('rejected')
        }
    },1000) 
})

// 1s後隨機輸出 value resolved 或者 reason rejected

步驟3、.then 裏的處理流程學習

在promise中， .then 將傳入的 resolvedHandle 和 rejectedHandle 函數存入 promise 的 handlers 中做爲回調列表中的一項，在須要的時候(Promise被完成的時候)攜帶最終結果執行。

首先，假設有個異步操做，並且已經知道回調函數是什麼，代碼以下：

var resolvedHandle = function(res){ console.log(res) };
var rejectedHandle = function(err){ console.log(err) };

setTimeout(function(){
    var result = Math.random() <= 0.5 ? 1:0;
    if(result){
        resolvedHandle('resolved');
    }else{
        rejectedHandle('rejected');
    }
},1000)

// 1s後輸出 resolved 或者 rejected

而對於 promise 而言，回調函數是在 .then 中傳入而且在 promise 中給定義的，而且爲了實現鏈式的操做， .then 中必須有返回一個對象，且對象須是一個攜帶 .then 方法的對象或函數或爲一個 promise ，才足以繼續執行.then。

// fn 做爲初始化Promise時傳入的函數，應該被當即執行並取出其中的調用
function Promise(fn) {

    var $resolveHandle = function (res) { };
    var $rejectHandle = function (err) { };

    // 執行Promise被完成時函數
    function resolve(value) {
        try {
            var then = getThen(value);
            if (then) {
                init(then.bind(value), resolve, reject);
                return;
            };
            fulfill(value);
        } catch (err) {
            reject(err);
        }
    }

    // 完成時
    function fulfill(value) {
        $resolveHandle(value);
        $resolveHandle = null;
    }

    // 拒絕時
    function reject(reason) {
        $rejectHandle(reason);
        $rejectHandle = null;
    }

    // 執行傳入的fn並執行回調
    function init(fn, onResolved, onRejected) {
        try {
            fn(function (value) {
                onResolved(value);
            }, function (reason) {
                onRejected(reason);
            })
        } catch (err) {
            onRejected(err);
        }
    }

    init(fn, resolve, reject);

    function getThen(value) {
        var t = typeof value;
        if (value && (t === 'object' || t === 'function')) {
            var then = value.then;
            if (typeof then === 'function') {
                return then;
            }
        }
        return null;
    };

    this.then = function (resolveHandle, rejectHandle) {
        return new Promise(function (resolve, reject) {
            $resolveHandle = function (result) {
                resolve(resolveHandle(result));
            }
            $rejectHandle = function (reason) {
                if(rejectHandle){
                    resolve(rejectHandle(reason));
                }else{
                    reject(reason)
                }
            }
        })
    }
}

var firstPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var result = Math.random() <= 0.5 ? 1 : 0;
        if (result) {
            resolve('resolved');
        } else {
            reject('rejected');
        }
    }, 1000);
})

var secondPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var result = Math.random() <= 0.5 ? 1 : 0;
        if (result) {
            resolve('resolved 2');
        } else {
            reject('rejected 2');
        }
    }, 2000);
})

firstPromise.then(function (res) {
    console.log('res ', res);
    return secondPromise;
}).then(function (res) {
    console.log('res 2 ', res);
}, function (err) {
    console.log('rej 2 ', err);
})
// 1s後隨機輸出 res resolved  或者  rej rejected
// 又1s後輸出 res 2 resolved 2 或者 rej 2 rejected 2 或者 rej 2 rejected

至此，上面的代碼基本算是知足了一個 promise 的實現思路，但離正規軍 promise 實現還存在一段距離

o(╥﹏╥)o...接下去學習吧。

步驟4、Promise/A+規範

因爲 Promise/A+規範較長，就不放到文章裏了，給連接吧(中午版是本身翻譯的，有出入的地方還請以英文原版爲準)

Promise/A+ 規範 [ 原文 ]

Promise/A+ 規範 [ 譯文 ]

對照promise/A+規範，以上的Promise代碼還存在問題：

　　1.promise還須要存儲promise狀態和最終結果，以便後續被屢次使用；

　　2.同一個promise的.then方法中註冊的回調函數可被屢次執行，且回調函數能夠是個列表；

　　3.事件調度，回調函數應該在本輪.then方法所在事件隊列結束後被調用；

　　4.捕捉錯誤並作拒絕處理；

　　更多細節...

繼續改進，最後整改後的代碼大體是這樣的：

function Promise(fn) {
    /* state
    * 0 : pending 
    * 1 : resloved 
    * 2 : rejected 
    */
    var state = 0;
    var value = null;
    var handlers = [];

    function fulfill(result) {
        state = 1;
        value = result;
        handlers.forEach(handle);
        handlers = [];
    };

    function reject(error) {
        state = 2;
        value = error;
        handlers.forEach(handle);
        handlers = [];
    };

    function resolve(result) {
        try {
            var then = getThen(result);
            if (then) {
                init(then.bind(result), resolve, reject);
                return;
            }
            fulfill(result);
        } catch (err) {
            reject(err);
        }
    };

    function getThen(value) {
        var type = typeof value;
        if (value && (type === 'object' || type === 'function')) {
            var then = value.then;
            if (typeof then === 'function') {
                return then;
            }
        }
        return null;
    };

    function handle(handler) {
        if (state === 0) {
            handlers.push(handler);
        } else {
            if (typeof handler.onResolved === 'function') {
                if (state === 1) {
                    handler.onResolved(value);
                };
                if (state === 2) {
                    handler.onRejected(value);
                };
            }
        }
    };

    // 放到事件隊列最後，在本輪事件執行完後執行
    function timeHandle(callback, newValue) {
        setTimeout(function () {
            callback(newValue);
        }, 0)
    }

    function init(fn, onResolved, onRejected) {
        try {
            fn(function (value) {
                timeHandle(onResolved, value);
            }, function (reason) {
                timeHandle(onRejected, reason);
            });
        } catch (err) {
            timeHandle(onRejected, err);
        }
    };

    init(fn, resolve, reject);

    this.then = function (onResolved, onRejected) {
        if (!onResolved && !onRejected) {
            throw new TypeError('One of onResolved or onRejected must be a function.')
        };
        return new Promise(function (resolve, reject) {
            handle({
                onResolved: function (result) {
                    if (typeof onResolved === 'function') {
                        try {
                            resolve(onResolved(result));
                        } catch (err) {
                            reject(err);
                        }
                    } else {
                        resolve(result);
                    }
                },
                onRejected: function (error) {
                    if (typeof onRejected === 'function') {
                        try {
                            resolve(onRejected(error));
                        } catch (err) {
                            reject(err);
                        }
                    } else {
                        reject(error);
                    }
                }
            })
        })
    };
}

var firstPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var result = Math.random() <= 0.5 ? 1 : 0;
        if (result) {
            resolve('resolved 1');
        } else {
            reject('rejected 1');
        }
    }, 1000);
})

var secondPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var result = Math.random() <= 0.5 ? 1 : 0;
        if (result) {
            resolve('resolved 2');
        } else {
            reject('rejected 2');
        }
    }, 3000);
})

firstPromise.then(function (res) {
    console.log('res 1 ', res);
    return secondPromise;
}, function (err) {
    console.log('rej 1 ', err);
    return secondPromise;
}).then(function (res) {
    console.log('res 2 ', res);
}, function (err) {
    console.log('rej 2 ', err);
})

/* *
 * 1s後輸出 res 1 resolved 1 或者 rej 1 rejected 1
 * 2s後輸出 res 2 resolved 2 或者 rej 2 rejected 2
 * */

經過板塊1、2、三的知識點，便可大體摸清promise的實現；板塊四加上一些補充和限制，遵循一些規範，提升promise功能的可擴展性。

學會了怎麼理解promise，更重要的是學會正確的使用它。

正確使用 Promise

promise 在業務開發中多用來處理異步或者多層回調的狀況。

基礎使用 Promise MDN 及相關介紹文檔中的案例爲準，這裏不一一贅述了... 這裏簡單的列出兩個在使用 promise 過程當中比較須要注意的點：

1. 不一樣平臺環境下 Promise 的方法和遵循規則略微有些出入，詳情以各平臺環境下的 Promise 對象爲基準。

　　如 es6 Promise 存在Promise.race，Promise.all等方法，node中則沒有這些方法。

　　如 瀏覽器 Promise 事件調度走的是 setTimeout，node 走的是 process.nextTick 。(參考 [asap] )

2. Promise 雖可解決回調操做的規範問題(回調地獄)，但也不能濫用 Promise (可能會佔用過多內存)。

promise 解決後的結果會被存於內存中，被對應 promise 引用着，將上面的最終代碼中測試的兩個 promise 改爲以下：

var firstPromise = new Promise(function (resolve, reject) {
        setTimeout(function () {
            var result = Math.random() <= 0.5 ? 1 : 0;
            var str = '';
            var i = 0, num = 500000;
            for (; i < num; i++) {
                str += 'promise '
            }
            if (result) {
                resolve('resolved 1 : ' + str);
            } else {
                reject('rejected 1 : ' + str);
            }
        }, 1000);
    })

則內存佔用狀況以下:

這些是一些平臺差別或業務需求方面的不一樣點，對 Promise 核心實現並影響甚微，對 Promise 擴展方法有影響，對業務中 Promise 的使用有影響。

參考

1. Promise/implementing 

2. Promise 實現代碼閱讀

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