promise原理探究

Imfan 發(fā)布于2019-08-23 10:25 / 2347人閱讀

摘要：直接修改狀態(tài)為指定值，然后接著執(zhí)行回調(diào)嗚嗚嗚，有時(shí)候總會(huì)犯傻不是，上面第一種維護(hù)一個(gè)定時(shí)器，效率低下第二種把狀態(tài)變得很麻煩和復(fù)雜其實(shí)很多事情之所以復(fù)雜，是因?yàn)槲覀兿氲奶唷８緵]那么復(fù)雜，就三個(gè)狀態(tài)，搞毛線定時(shí)器，狀態(tài)跟蹤。

前言

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

狀態(tài)機(jī)

早聞Promise的大名，簡(jiǎn)單介紹，根據(jù)狀態(tài)改變來執(zhí)行相應(yīng)處理函數(shù)。
Promise的狀態(tài)極其簡(jiǎn)單，只有 "pending", "resolved", "rejected"三種狀態(tài)
然后就是如何實(shí)現(xiàn)的問題，最關(guān)鍵的當(dāng)然是監(jiān)聽到狀態(tài)的更新，然后才能做出回應(yīng)，那么如何知道狀態(tài)變了呢？
最初單純的我開了一個(gè)腦洞,有以下想法：

寫一個(gè)定時(shí)器不斷查詢狀態(tài)值，如果有變化，那么執(zhí)行回調(diào)

利用ES5的 Object.defineProperty(obj, prop, descriptor)來追蹤狀態(tài)變化。

直接修改狀態(tài)為指定值，然后接著執(zhí)行回調(diào)

嗚嗚嗚，有時(shí)候總會(huì)犯傻不是，上面第一種維護(hù)一個(gè)定時(shí)器，效率低下；第二種把狀態(tài)變得很麻煩和復(fù)雜；
其實(shí)很多事情之所以復(fù)雜，是因?yàn)槲覀兿氲奶唷?br>Promise根本沒那么復(fù)雜，就三個(gè)狀態(tài)，搞毛線定時(shí)器，狀態(tài)跟蹤。
利用觀察者模式，只需要通過特定書寫方式注冊(cè)對(duì)應(yīng)狀態(tài)的事件處理函數(shù)，然后更新狀態(tài)，調(diào)用注冊(cè)過的處理函數(shù)即可。這個(gè)特定方式就是 then ,done ,fail, always...等方法；更新狀態(tài)觸發(fā)時(shí)機(jī)就是resolve, reject方法。

簡(jiǎn)單實(shí)現(xiàn)

理論分析：

寫一個(gè)類對(duì)象，維護(hù)一個(gè) state，值有3種："pending", "resolved", "rejected"

通過then done fail always方法注冊(cè)回調(diào)處理函數(shù)

通過resolve reject分別更新對(duì)應(yīng)狀態(tài)，并且調(diào)用注冊(cè)函數(shù)

代碼如下:

/**
 * [3種狀態(tài)]
 * @type {String}
 */
var PENDING = "pending";
var RESOLVED = "resolved";
var REJECTED = "rejected";

/**
 * [Promise類實(shí)現(xiàn)]
 * 構(gòu)造函數(shù)傳入一個(gè)fn，有兩個(gè)參數(shù)，resolve：成功回調(diào); reject：失敗回調(diào);
 * state: 狀態(tài)存儲(chǔ)
 * doneList: 成功處理函數(shù)列表
 * failList: 失敗處理函數(shù)列表
 * done: 注冊(cè)成功處理函數(shù)
 * fail: 注冊(cè)失敗處理函數(shù)
 * then: 同時(shí)注冊(cè)成功和失敗處理函數(shù)
 * always: 一個(gè)處理注冊(cè)到成功和失敗，都會(huì)調(diào)用
 * resolve: 更新state為：RESOLVED，并且執(zhí)行成功處理隊(duì)列
 * reject: 更新state為：REJECTED，并且執(zhí)行失敗處理隊(duì)列
 */
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
使用方式，請(qǐng)到https://github.com/donglegend/MyPromise下載使用
源碼下載