摘要：不過(guò)最近我對(duì)于實(shí)現(xiàn)的思考過(guò)程的有了一點(diǎn)點(diǎn)個(gè)人理解，特此記下。用例我覺(jué)得實(shí)現(xiàn)一個(gè)函數(shù)跟封裝組件類似，首先從以下幾點(diǎn)考慮這個(gè)函數(shù)用來(lái)做什么的接受哪些參數(shù)返回值是什么那么結(jié)合例子，和這幾個(gè)問(wèn)題，我們得到是做異步流程控制的。

我一直覺(jué)得Promise雖然方便，但是它的寫法很怪，無(wú)法理解實(shí)現(xiàn)Promise的人是如何思考的。

不過(guò)最近我對(duì)于實(shí)現(xiàn)Promise的思考過(guò)程的有了一點(diǎn)點(diǎn)個(gè)人理解，特此記下。

感覺(jué)這篇文章我還是沒(méi)有把思路說(shuō)清楚，時(shí)間緊張，就當(dāng)做一次記錄，回頭我要把這個(gè)過(guò)程在表達(dá)的在清楚一點(diǎn)。

用例

   var p1 = new Promise2( ( resolve, reject ) => {
            setTimeout( () => {
                resolve( "hello" )
            }, 1000 )

        } )

        p1.then( res => {
                console.log( res + "world" )
                return res + "world"
            } )
            .then( res => {
                console.log( res + "ziwei" )
                return res + "ziwei"
            } )

我覺(jué)得實(shí)現(xiàn)一個(gè)函數(shù)跟封裝組件類似，首先從以下幾點(diǎn)考慮：

1.這個(gè)函數(shù)用來(lái)做什么的？

2.接受哪些參數(shù)

3.返回值是什么

那么結(jié)合例子，和這幾個(gè)問(wèn)題，我們得到

1.Promise是做異步流程控制的。通俗說(shuō)就是，我希望某個(gè)函數(shù)暫時(shí)不執(zhí)行，等我希望它執(zhí)行時(shí)，就resolve一下，你這個(gè)函數(shù)在執(zhí)行。

2.構(gòu)造函數(shù)Promise接受一個(gè)函數(shù)。函數(shù)的參數(shù)是resolve,reject，resolve和reject也是函數(shù)，是給用戶調(diào)用用的，當(dāng)用戶希望下一個(gè)異步執(zhí)行時(shí)，就調(diào)用resolve(0

3.返回一個(gè)promise實(shí)例。 promise實(shí)例都有一個(gè)then方法，而then方法也返回一個(gè)新的promise實(shí)例。由此就可以鏈?zhǔn)秸{(diào)用then了

先實(shí)現(xiàn)一個(gè)Promise（未實(shí)現(xiàn)then的鏈?zhǔn)秸{(diào)用）

1.Promise接受一個(gè)fn，不管其他，你覺(jué)得這個(gè)fn在內(nèi)部會(huì)干嘛？只能被調(diào)用唄，所以雖然不知道怎么搞，但是先調(diào)用一下fn(resolve,reject)

2.那這個(gè)resolve和reject不是用戶實(shí)現(xiàn)的，所以肯定是Promise開發(fā)者實(shí)現(xiàn)的，那我們要實(shí)現(xiàn)resolve和reject，它們是干嘛的，肯定用來(lái)是改變狀態(tài)的，所以定義this.state

3.resolve和reject也會(huì)接受用戶的參數(shù)吧，那我們就需要把這個(gè)參數(shù)用this.value緩存一下，將來(lái)then方法調(diào)用時(shí)，需要傳遞進(jìn)去

4.then接受successFn和errorFn，這2個(gè)就是我們希望暫時(shí)不執(zhí)行的函數(shù)了。怎么做到暫時(shí)不執(zhí)行呢？就是聲明2個(gè)數(shù)組，把他們先存起來(lái)，將來(lái)resolve時(shí)，在調(diào)用

        class Promise2 {
            constructor( fn ) {
                this.successFnArray = []  // 用來(lái)緩存successFn和errorFn
                this.errorFnArray = []
                this.state = "pendding"
                const resolve = ( res ) => {      // resolve就做2件事情  1: 修改狀態(tài) 2:調(diào)用successFn
                    this.state = "fulfilled"
                    this.value = res         // this.value用來(lái)緩存data數(shù)據(jù)或者error

                    this.successFnArray.forEach( successFn => {
                        successFn( res )
                    } )
                }
                const reject = ( err ) => {
                    this.state = "rejected"
                    this.value = err

                    this.errorFnArray.forEach( errorFn => {
                        errorFn( res )
                    } )
                }
                fn( resolve, reject )   // 先調(diào)用fn再說(shuō)
            }

            then( successFn, errorFn ) {
                switch ( this.state ) {
                    case "fulfilled":
                        successFn( this.value )        // 如果調(diào)用了resolve,狀態(tài)就成了fulfilled，就會(huì)執(zhí)行successFn
                        break
                    case "rejected":
                        errorFn( this.value )
                        break
                    case "pendding":
                        this.successFnArray.push( successFn )   // 如果還沒(méi)調(diào)用resolve,狀態(tài)就是pendding，就先把這些異步函數(shù)緩存起來(lái)。將來(lái)resole時(shí)調(diào)用
                        this.errorFnArray.push( errorFn )
                }
            }
        }

        var p1 = new Promise2( ( resolve, reject ) => {
            setTimeout( () => {
                resolve( "hello" )
            }, 1000 )

        } )

        p1.then( res => {
            console.log( res + "world" )
            return res + "world"
        } )

實(shí)現(xiàn)then鏈?zhǔn)秸{(diào)用

then的實(shí)現(xiàn)，和JQ的鏈?zhǔn)秸{(diào)用不同，JQ是每次調(diào)用方法后，把this返回

而Promise規(guī)范要求，每次都要返回新的Promise對(duì)象

所以只需要把then方法修改一下。

這部分可能會(huì)迷惑，但是我想先說(shuō)一下這里做了哪些事情，其實(shí)變化不大

之前的then做了哪些事情？

就是按照不同的state，調(diào)用了successFn或者errorFn，如果是pendding狀態(tài)就先緩存起來(lái)，等將來(lái)resolve時(shí)調(diào)用

鏈?zhǔn)絫hen有哪些改動(dòng)？

首先then有了返回值，返回一個(gè)promise，而之前沒(méi)有返回值，return的是undefined

new Promise的過(guò)程，其實(shí)邏輯沒(méi)什么變化，唯一注意的，比如狀態(tài)fulfilled時(shí)，并非直接調(diào)用successFn

而是調(diào)用_successFn,而這個(gè)函數(shù)內(nèi)部本質(zhì)上還是調(diào)用successFn(),但同時(shí)把調(diào)用的返回值作為了resolve的參數(shù)，調(diào)用了resolve()

因?yàn)楫?dāng)successFn被調(diào)用，得到返回值時(shí)，就表示這個(gè)函數(shù)執(zhí)行完了，

就需要執(zhí)行下一個(gè)異步函數(shù)了，這樣下一個(gè)異步函數(shù)也會(huì)把successFn(res)的return值作為參數(shù)

       then( successFn, errorFn ) {
                
                return new Promise2( ( resolve, reject ) => {
                    const _successFn = res => {
                        resolve(successFn(res))
                    }
                    const _errorFn = err => {
                        reject(errorFn(err))
                    }
                    
                    switch ( this.state ) {
                        case "fulfilled":
                        _successFn( this.value )
                            break
                        case "rejected":
                        _errorFn( this.value )
                            break
                        case "pendding":
                            this.successFnArray.push( _successFn )
                            this.errorFnArray.push( _errorFn )
                    }
                } )

            }