摘要：狀態(tài)機(jī)由于僅僅是一個(gè)狀態(tài)機(jī)，我們必須從我們將會(huì)用到的狀態(tài)信息開(kāi)始考慮。觀察方法我們現(xiàn)在有一個(gè)已經(jīng)完成的狀態(tài)機(jī)，但是我們?nèi)匀粵](méi)有觀察他的變化。

這幾天在看樸靈的深入淺出nodejs，看到異步編程的解決方案這一章時(shí)，卡在了promise這個(gè)地方。心中的念頭就是自己動(dòng)手寫一個(gè)promise才好,于是就開(kāi)始在網(wǎng)上找資料。

簡(jiǎn)介，這些代碼首先是發(fā)表在Stack Overflow,是希望你能從中學(xué)習(xí)如何使用javascript實(shí)現(xiàn)一個(gè)promise，你將會(huì)更好的理解promise是如何的實(shí)現(xiàn)的。

由于promise僅僅是一個(gè)狀態(tài)機(jī)，我們必須從我們將會(huì)用到的狀態(tài)信息開(kāi)始考慮。

var PENDDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise(){
    //保存的狀態(tài)可以為PENDDING,FULFILLED和REJECTED
    var state = PENDDING;
    //一旦FULFILLED或者REJECTED保存為value或者err
    var value = null;
    //保存成功或者失敗的處理程序
    var handlers = []
}

第二步，讓我們考慮下面兩種可能出現(xiàn)的情形，fulfilling和rejecting：

var PENDDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise(){
    //保存的狀態(tài)可以為PENDDING,FULFILLED和REJECTED
    var state = PENDDING;
    //一旦FULFILLED或者REJECTED保存為value或者err
    var value = null;
    //保存成功或者失敗的處理程序
    var handlers = []

    function fullfill(result){
        state = FULFILLED;
        value = result;
    }

    function reject(error){
        state = REJECTED;
        value = error;
    }
}

上面這些給了我們較低等級(jí)的變換，但是我們還可以考慮額外更高級(jí)的叫做resolve的變換。

var PENDDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise(){
    //保存的狀態(tài)可以為PENDDING,FULFILLED和REJECTED
    var state = PENDDING;
    //一旦FULFILLED或者REJECTED保存為value或者err
    var value = null;
    //保存成功或者失敗的處理程序
    var handlers = []

    function fulfill(result){
        state = FULFILLED;
        value = result;    
    }

    function reject(error){
        state = REJECTED;
        value = error;
    }

    function resolve(result){
        try{
            var then = getThen(result);
            if(then){
                doResolve(then.resolve(result),resolve,reject)
                return 
            }
            fullfill(result)
        }catch(e){
            reject(e)
        }
    }
}

注意無(wú)論傳入resolve的是一個(gè)promise對(duì)象還是一個(gè)普通值，如果它是一個(gè)promise對(duì)象，等待他完成。一個(gè)promise對(duì)象不會(huì)進(jìn)入fulfilled狀態(tài)如果它還包含一個(gè)promise對(duì)象的話，因此我們將要暴露出的resolve函數(shù)強(qiáng)于內(nèi)部的fulfill。我們用到了一系列的輔助函數(shù)，如下：

/**
 * 檢查一個(gè)value是否是一個(gè)promise對(duì)象，如果是，返回那個(gè)promise的then方法
 *
 * @param {promise|any} value
 * @return {Function|null}
 */
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
}
/**
 * 創(chuàng)建一個(gè)對(duì)潛在行為的處理方法并且保證onFulfilled和onRejected只被調(diào)用一次
 * 不對(duì)異步做保證
 *
 * @param {Function} fn A resolver function that may not be trusted
 * @param {Function} onFulfilled
 * @param {Function} onRejected
 */
function doResolve(fn,onFulfilled,onRejected){
    var done = false;
    try{
        fn(function(value){
            if(done) return
            done = true
            onFulfilled(value)
        },function(reason){
            if(done) return 
            done = true
            onRejected(reason)
        })
    }catch(ex){
        if(done) return 
        done = true
        onRejected(ex)
    }
}

我們現(xiàn)在已經(jīng)完成了內(nèi)部的狀態(tài)機(jī)，但同時(shí)我們還需要暴露一個(gè)處理或者觀察該promise的方法，我們來(lái)增加一個(gè)處理promise的途徑：

var PENDDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise(fn){
    //保存的狀態(tài)可以為PENDDING,FULFILLED和REJECTED
    var state = PENDDING;
    //一旦FULFILLED或者REJECTED保存為value或者err
    var value = null;
    //保存成功或者失敗的處理程序
    var handlers = []


    function fulfill(result){
        state = FULFILLED;
        value = result;    
    }

    function reject(error){
        state = REJECTED;
        value = error;
    }

    function resolve(result){
        try{
            var then = getThen(result);
            if(then){
                doResolve(then.resolve(result),resolve,reject)
                return 
            }
            fullfill(result)
        }catch(e){
            reject(e)
        }
    }

    doResolve(fn,resolve,reject)
}

如你所見(jiàn)，我們復(fù)用了deResolve因?yàn)槲覀冇辛硪粋€(gè)不被信任的處理器，fn函數(shù)可以調(diào)用resolve和reject多次，甚至可以拋出異常，我們現(xiàn)在要做的是保證promise只執(zhí)行或者拒絕一次，然后不在變換為其他的狀態(tài)。

我們現(xiàn)在有一個(gè)已經(jīng)完成的狀態(tài)機(jī)，但是我們?nèi)匀粵](méi)有觀察他的變化。我們最終要完成的是實(shí)現(xiàn).then，但是由于.done簡(jiǎn)單很多于是我們就先實(shí)現(xiàn)它。
我們現(xiàn)在要實(shí)現(xiàn)promise.done(onFulfilled,onRejected)要滿足以下的功能：
- onFulfilled和onRejected中一個(gè)被調(diào)用
- 只被調(diào)用一次
- 在下一個(gè)tick（即.done方法返回后）時(shí)才被調(diào)用
- 它將會(huì)被調(diào)用不管promise是在我們調(diào)用.done之前或者之后被處理

var PENDDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise(fn){
    //保存的狀態(tài)可以為PENDDING,FULFILLED和REJECTED
    var state = PENDDING;
    //一旦FULFILLED或者REJECTED保存為value或者err
    var value = null;
    //保存成功或者失敗的處理程序
    var handlers = []


    function fulfill(result){
        state = FULFILLED;
        value = result;
        handlers.forEach(handle);
        handlers = null
    }

    function reject(error){
        state = REJECTED;
        value = error;
        handlers.forEach(handle);
        handlers = null
    }

    function resolve(result){
        try{
            var then = getThen(result);
            if(then){
                doResolve(then.resolve(result),resolve,reject)
                return 
            }
            fullfill(result)
        }catch(e){
            reject(e)
        }
    }

    function handle(handler){
        if(state === PENDDING){
            handlers.push(handler)
        }else{
            if(state === FULFULLIED && typeof handler.onFulfilled === "function"){
                handler.onFulfilled(value);
            }
            if(state === REJECTED && typeof handler.onRejected === "function"){
                handler.onRejected(value);
            }
        }
    }

    this.done = function(onFulfilled,onRejected){
        //保證異步執(zhí)行
        setTimeout(function(){
            handle({
                onFulfilled : onFulfilled,
                onRejected  : onRejected
            })
        },0)
    }

    doResolve(fn,resolve,reject)
}

我們得確定Promise被Resolved或者Rejected后處理程序可以得到通知，僅僅是在進(jìn)入下一個(gè)tick時(shí)做這些。

現(xiàn)在我們已經(jīng)完成了.done方法，我們可以很類似的實(shí)現(xiàn).then方法，只是要多構(gòu)建一個(gè)Promise方法。

this.then = function(onFulfilled,onRejected){
    var self = this;
    return new Promise(function(resolve,Reject){
        return self.done(function(resolve){
                if(typeof onFulfilled === "function"){
                    try{
                        resolve(onFulfilled(result))
                    }catch(e){
                        reject(e)
                    }
                }else{
                    return resolve(result)
                }
        },function(error){
            if(typeof onRejected === "function"){
                try{
                    reject(onRejected(error))
                }catch(e){
                    reject(e)
                }
            }else{
                reject(error)
            }
        })
    })
}

以上翻譯自Promise Implementing。