分步理解 Promise 的實現

一個 Promise 的運用：

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 被完成/被拒絕時執行對應的回調取到異步結果。

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

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

步驟一、Promise 構造函數

創建 promise 對象的構造函數，是創造 promise 的工廠。

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

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

步驟二、初始化過程，處理參數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

步驟三、.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...接下去學習吧。

步驟四、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
 * */

通過板塊一、二、三的知識點，即可大致摸清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 實現代碼閱讀