Promise 原理探究及其簡單實現

可移步 http://donglegend.com/2016/09/11/promise%E5%8E%9F%E7%90%86%E6%8E%A2%E7%A9%B6/ 觀看

Promise是個什么玩意，大家都知道，度娘告訴我，以同步方式書寫異步，解決回調地獄。。。

狀態機

早聞Promise的大名，簡單介紹，根據狀態改變來執行相應處理函數。
Promise的狀態極其簡單，只有 “pending”, “resolved”, “rejected”三種狀態
然后就是如何實現的問題，最關鍵的當然是監聽到狀態的更新，然后才能做出回應，那么如何知道狀態變了呢？
最初單純的我開了一個腦洞,有以下想法：

• 寫一個定時器不斷查詢狀態值，如果有變化，那么執行回調
• 利用ES5的 Object.defineProperty(obj, prop, descriptor)來追蹤狀態變化。
• 直接修改狀態為指定值，然后接着執行回調

嗚嗚嗚，有時候總會犯傻不是，上面第一種維護一個定時器，效率低下；第二種把狀態變得很麻煩和復雜；
其實很多事情之所以復雜，是因為我們想的太多。
Promise根本沒那么復雜，就三個狀態，搞毛線定時器，狀態跟蹤。
利用觀察者模式，只需要通過特定書寫方式注冊對應狀態的事件處理函數，然后更新狀態，調用注冊過的處理函數即可。這個特定方式就是 then ,done ,fail, always…等方法；更新狀態觸發時機就是resolve, reject方法。

簡單實現

理論分析：

• 寫一個類對象，維護一個 state，值有3種：”pending”, “resolved”, “rejected”
• 通過then done fail always方法注冊回調處理函數
• 通過resolve reject分別更新對應狀態，並且調用注冊函數

代碼如下:

/**
 * [3種狀態]
 * @type {String}
 */

var PENDING = "pending";
var RESOLVED = "resolved";
var REJECTED = "rejected";
/**
 * [Promise類實現]
 * 構造函數傳入一個fn，有兩個參數，resolve：成功回調; reject：失敗回調;
 * state: 狀態存儲
 * doneList: 成功處理函數列表
 * failList: 失敗處理函數列表
 * done: 注冊成功處理函數
 * fail: 注冊失敗處理函數
 * then: 同時注冊成功和失敗處理函數
 * always: 一個處理注冊到成功和失敗，都會調用
 * resolve: 更新state為：RESOLVED，並且執行成功處理隊列
 * reject: 更新state為：REJECTED，並且執行失敗處理隊列
 */
var Promise = (function (){
    function Promise(fn){
        this.state = PENDING;
        this.doneList = [];
        this.failList = [];
        this.fn = fn;
        this.fn(this.resolve.bind(this), this.reject.bind(this))
    }

    var p = {
        done: function (cb){
            if(typeof cb == "function")
                this.doneList.push(cb)
            return this;
        },
        fail: function(cb){
            if(typeof cb == "function")
                this.failList.push(cb);
            return this;
        },
        then: function(success, fail){
            this.done(success || noop).fail(fail || noop)
            return this;
        },
        always: function(cb){
            this.done(cb).fail(cb)
            return this;
        },
        resolve: function(){
            this.state = RESOLVED;
            var lists = this.doneList;
            for(var i = 0, len = lists.length; i<len; i++){
                lists[0].apply(this, arguments);
                lists.shift();
            }
            return this;
        },
        reject: function(){
            this.state = REJECTED;
            var lists = this.failList;
            for(var i = 0, len = lists.length; i<len; i++){
                lists[0].apply(this, arguments);
                lists.shift();
            }
            return this;
        }
    }
    for(var k in p){
        Promise.prototype[k] = p[k]
    }

    return Promise;
})();

function noop(){}

 使用方式，請到https://github.com/donglegend/MyPromise下載使用

 

源碼下載