觀看之前請(qǐng)先熟悉promise的基本使用

一、剖析promise由哪些東西組成

在日常的使用中，我們可以知道，一個(gè)完整的promise應(yīng)當(dāng)包含成功、失敗、進(jìn)行中這三個(gè)狀態(tài)，同時(shí)還有resolve，reject兩個(gè)改變狀態(tài)的成員函數(shù)。最后還會(huì)有一個(gè)then函數(shù)來(lái)接收promise的執(zhí)行結(jié)果

在了解了上述的內(nèi)容之后，一個(gè)promise的雛形就出來(lái)了

class myPromise {
        constructor(executor) {
            //默認(rèn)狀態(tài)為pending
            this.status = 'pending'
            //成功的默認(rèn)值為undefined
            this.successVal = undefined
            //失敗的默認(rèn)值為undefined
            this.errorVal = undefined
            //初始化時(shí)調(diào)用傳入的回調(diào)函數(shù)
            executor(this.resolve,this.reject)
        }

        resolve = (data) => {

        }

        reject = (err) => {

        }
        then = (success_cb,error_cb) => {
        }
}

這里要說(shuō)明一下，then函數(shù)，可能在日常使用中大家都習(xí)慣性的只傳入一個(gè)參數(shù)。其實(shí)then是有兩個(gè)參數(shù)的，第一個(gè)參數(shù)是promise成功時(shí)調(diào)用，第二個(gè)參數(shù)是失敗時(shí)調(diào)用。而我們熟知的catch函數(shù)，其實(shí)內(nèi)部就是調(diào)用的then函數(shù)，只不過(guò)傳入的是失敗的回調(diào)

 catch = (err_cb) => {
            this.then(undefined, err_cb)
        }

下面來(lái)完善一下幾個(gè)函數(shù)的內(nèi)容

        resolve = (data) => {
         if (this.status === 'pending') {
                this.status = 'success'
                this.successVal = data
               
            }
        }

        reject = (err) => {
          if (this.status === 'pending') {
                this.status = 'error'
                this.errorVal = err
              
            }
        }
        then = (success_cb,error_cb) => {
                  setTimeout(() => {
                  if (this.status === 'success') {
                  success_cb(this.successVal )
                  }else if(this.status === 'error'){
                   success_cb(this.errorVal )
                  }
                  })
        }

這樣，一個(gè)簡(jiǎn)易版的promise就實(shí)現(xiàn)了。

接下來(lái)就需要去實(shí)現(xiàn)promise處理異步問(wèn)題。

首先分析一下，出現(xiàn)了異步代碼之后會(huì)發(fā)生什么情況：
通常使用一個(gè)有異步的promise會(huì)這樣

new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(123)
    },2000)
})

這樣我們?cè)谡{(diào)用then的時(shí)候其實(shí)resolve還沒(méi)有被執(zhí)行，promise的狀態(tài)也并沒(méi)有變更。所以我們要做的就是講then函數(shù)接收到的參數(shù)存起來(lái)，等到promise的狀態(tài)變了之后再去調(diào)用他。這樣就能做到處理異步問(wèn)題了

        constructor(executor) {
            //默認(rèn)狀態(tài)為pending
            this.status = 'pending'
            //成功的默認(rèn)值為undefined
            this.successVal = undefined
            //失敗的默認(rèn)值為undefined
            this.errorVal = undefined
            //存放成功的回調(diào)函數(shù)
            this.successCallBackList = []
            //存放失敗的回調(diào)函數(shù)
            this.errorCallBackList = []
            //自動(dòng)執(zhí)行一次傳入的回調(diào)函數(shù)
            try {
                executor(this.resolve, this.reject)
            } catch (err) {
                this.reject(err)
            }
        }
     resolve = (data) => {
            if (this.status === 'pending') {
                this.status = 'success'
                this.successVal = data
                this.successCallBackList.forEach(fn => fn(this.successVal))
            }
        }

        reject = (err) => {
            if (this.status === 'pending') {
                this.status = 'error'
                this.errorVal = err
                this.errorCallBackList.forEach(fn => fn(this.errorVal))
            }
        }
        then = (success_cb,error_cb) => {
                  setTimeout(() => {
                  if (this.status === 'success') {
                  success_cb(this.successVal )
                  }else if(this.status === 'error'){
                   success_cb(this.errorVal )
                  }else{
                        this.successCallBackList.push(success_cb)
                        this.errorCallBackList.push(error_cb)
                  }
                  })
        }

上面代碼中就是在then里判斷當(dāng)前狀態(tài)，如果為pending的話就將回調(diào)存入對(duì)應(yīng)的數(shù)組，然后再resolve和reject函數(shù)中去遍歷存放回調(diào)的數(shù)組并且一一執(zhí)行里頭的函數(shù)。

這樣異步問(wèn)題也處理好了。
接下來(lái)就是最重要的處理then的鏈?zhǔn)交卣{(diào)了。這也是promise的特色。

首先需要明白的一點(diǎn)是，promise的then函數(shù)會(huì)返回一個(gè)新的promise，這樣我們才可以做到一直.then調(diào)用。其次，后面的then會(huì)拿到上一個(gè)then的返回值。
明白了這個(gè)概念之后我們就可以去著手寫then函數(shù)了

        then = (success_cb, error_cb) => {
            const promise2 = new myPromise((resolve, reject) => {
                    if (this.status === 'success') {
                        setTimeout(() => {
                            try {
                                if (typeof success_cb !== 'function') {
                                    resolve(this.successVal)
                                } else {
                                    let x = success_cb(this.successVal)
                                    resolvePromise(promise2, x, resolve, reject)
                                }
                            } catch (err) {
                                reject(err)
                            }
                        })
                    } else if (this.status === 'error') {
                        setTimeout(() => {
                            try {
                                if (typeof error_cb !== 'function') {
                                    reject(this.errorVal)
                                } else {
                                    let x = error_cb(this.errorVal)
                                    resolvePromise(promise2, x, resolve, reject)
                                }
                            } catch (err) {
                                reject(err)
                            }
                        })
                    } else {
                        this.successCallBackList.push(() => {
                            setTimeout(() => {
                                try {
                                    if (typeof success_cb !== 'function') {
                                        resolve(this.successVal)
                                    } else {
                                        let x = success_cb(this.successVal)
                                        resolvePromise(promise2, x, resolve, reject)
                                    }
                                } catch (err) {
                                    reject(err)
                                }
                            })
                        })
                        this.errorCallBackList.push(() => {
                            setTimeout(() => {
                                try {
                                    if (typeof error_cb !== 'function') {
                                        reject(this.errorVal)
                                    } else {
                                        let x = error_cb(this.errorVal)
                                        resolvePromise(promise2, x, resolve, reject)
                                    }
                                } catch (err) {
                                    reject(err)
                                }
                            })
                        })
                    }
                }
            )
            return promise2
        }

    /**
     * @param promise2 promise1.then中返回的新的promise
     * @param x promise1中then方法的回調(diào)函數(shù)返回的值
     * @param resolve promise2的reslove回調(diào)
     * @param reject promise2的reject回調(diào)
     */
    function resolvePromise(promise2, x, resolve, reject) {
        if (x === promise2) {
            /**
             * 如果x等于promis2 則拋出異常，防止陷入死循環(huán) 拋出的異常會(huì)被上一個(gè)promise的then方法捕獲到并且直接走reject方法
             */
            throw new TypeError('Chaining cycle detected for promise');
        }
        if (x instanceof myPromise) {
            /**
             * 如果 x 為 Promise ，則使 promise2 接受 x 的狀態(tài)
             * 也就是繼續(xù)執(zhí)行x，如果執(zhí)行的時(shí)候拿到一個(gè)y，還要繼續(xù)解析y
             */
            x.then(y => {
                resolvePromise(promise2, y, resolve, reject)
            }, reject)
        } else if (x !== null && ((typeof x === 'object') || (typeof x === 'function'))) {
            try {
                var then = x.then
            } catch (e) {
                return reject(e)
            }
            if (typeof then === 'function') {
                let called = false //防止多次調(diào)用
                try {
                    then.call(x, y => {
                        if (called) return
                        called = true
                        resolvePromise(promise2, y, resolve, reject)
                    }, err => {
                        if (called) return
                        called = true
                        reject(err)
                    })
                } catch (err) {
                    if (called) return
                    called = true
                    reject(err)
                }
            } else {
                resolve(x)
            }
        } else {
            resolve(x)
        }
    }

resolvePromise函數(shù)就是處理上一個(gè)then函數(shù)的返回值的工具函數(shù)。

then函數(shù)里的邏輯大致上就是，返回一個(gè)新的promise，這個(gè)新的promise里可以訪問(wèn)到上一個(gè)promise的所有屬性，同時(shí)可以通過(guò)調(diào)用自身的resolve和reject改變自身的狀態(tài)，并將上一個(gè)promise的then函數(shù)的返回值作為參數(shù)保存下來(lái)，這樣他自己的then函數(shù)就可以訪問(wèn)到這個(gè)值了。也就是我們所說(shuō)的下一個(gè)then能拿到上一個(gè)then的返回值。而在then函數(shù)中可能返回各種情況的值，所以寫了一個(gè)resolvePromise函數(shù)來(lái)處理各種情況。

以上就是一個(gè)完整的promise了。重要的就是理解then函數(shù)的鏈?zhǔn)交卣{(diào)。把這個(gè)搞明白了，整個(gè)promise也就豁然開朗了。

另外附上完整的代碼

 /**
     * @param promise2 promise1.then中返回的新的promise
     * @param x promise1中then方法的回調(diào)函數(shù)返回的值
     * @param resolve promise2的reslove回調(diào)
     * @param reject promise2的reject回調(diào)
     */
    function resolvePromise(promise2, x, resolve, reject) {
        if (x === promise2) {
            /**
             * 如果x等于promis2 則拋出異常，防止陷入死循環(huán) 拋出的異常會(huì)被上一個(gè)promise的then方法捕獲到并且直接走reject方法
             */
            throw new TypeError('Chaining cycle detected for promise');
        }
        if (x instanceof myPromise) {
            /**
             * 如果 x 為 Promise ，則使 promise2 接受 x 的狀態(tài)
             * 也就是繼續(xù)執(zhí)行x，如果執(zhí)行的時(shí)候拿到一個(gè)y，還要繼續(xù)解析y
             */
            x.then(y => {
                resolvePromise(promise2, y, resolve, reject)
            }, reject)
        } else if (x !== null && ((typeof x === 'object') || (typeof x === 'function'))) {
            try {
                var then = x.then
            } catch (e) {
                return reject(e)
            }
            if (typeof then === 'function') {
                let called = false //防止多次調(diào)用
                try {
                    then.call(x, y => {
                        if (called) return
                        called = true
                        resolvePromise(promise2, y, resolve, reject)
                    }, err => {
                        if (called) return
                        called = true
                        reject(err)
                    })
                } catch (err) {
                    if (called) return
                    called = true
                    reject(err)
                }
            } else {
                resolve(x)
            }
        } else {
            resolve(x)
        }
    }

    class myPromise {
        //靜態(tài)resolve方法，可以讓使用者直接通過(guò)類來(lái)訪問(wèn)，不需要實(shí)例化這個(gè)類。同時(shí)以static關(guān)鍵字標(biāo)識(shí)的屬性不會(huì)被實(shí)例繼承，只能通過(guò)類自身訪問(wèn)
        static resolve() {

        }

        constructor(executor) {
            //默認(rèn)狀態(tài)為pending
            this.status = 'pending'
            //成功的默認(rèn)值為undefined
            this.successVal = undefined
            //失敗的默認(rèn)值為undefined
            this.errorVal = undefined
            //存放成功的回調(diào)函數(shù)
            this.successCallBackList = []
            //存放失敗的回調(diào)函數(shù)
            this.errorCallBackList = []
            //自動(dòng)執(zhí)行一次傳入的回調(diào)函數(shù)
            try {
                executor(this.resolve, this.reject)
            } catch (err) {
                this.reject(err)
            }
        }

        resolve = (data) => {
            if (this.status === 'pending') {
                this.status = 'success'
                this.successVal = data
                this.successCallBackList.forEach(fn => fn(this.successVal))
            }
        }

        reject = (err) => {
            if (this.status === 'pending') {
                this.status = 'error'
                this.errorVal = err
                this.errorCallBackList.forEach(fn => fn(this.errorVal))
            }
        }

        then = (success_cb, error_cb) => {
            const promise2 = new myPromise((resolve, reject) => {
                    if (this.status === 'success') {
                        setTimeout(() => {
                            try {
                                if (typeof success_cb !== 'function') {
                                    resolve(this.successVal)
                                } else {
                                    let x = success_cb(this.successVal)
                                    //簡(jiǎn)易處理then
                                    if(x instanceof myPromise){
                                        if(x.status==='pending'){
                                            x.then()
                                        }else{
                                            //x的狀態(tài)不處于pending狀態(tài)，則將新的promise的resolve和reject作為x的then函數(shù)的參數(shù)傳入
                                            //這樣，當(dāng)x的狀態(tài)變更了，就會(huì)調(diào)用我們傳入的resolve和reject。并且會(huì)將x的最終值傳入。
                                            x.then(resolve, reject)
                                        }
                                    }else{
                                        resolve(x)
                                    }

                                    // resolvePromise(promise2, x, resolve, reject)
                                }
                            } catch (err) {
                                reject(err)
                            }
                        })
                    } else if (this.status === 'error') {
                        setTimeout(() => {
                            try {
                                if (typeof error_cb !== 'function') {
                                    reject(this.errorVal)
                                } else {
                                    let x = error_cb(this.errorVal)
                                    resolvePromise(promise2, x, resolve, reject)
                                }
                            } catch (err) {
                                reject(err)
                            }
                        })
                    } else {
                        this.successCallBackList.push(() => {
                            setTimeout(() => {
                                try {
                                    if (typeof success_cb !== 'function') {
                                        resolve(this.successVal)
                                    } else {
                                        let x = success_cb(this.successVal)
                                        resolvePromise(promise2, x, resolve, reject)
                                    }
                                } catch (err) {
                                    reject(err)
                                }
                            })
                        })
                        this.errorCallBackList.push(() => {
                            setTimeout(() => {
                                try {
                                    if (typeof error_cb !== 'function') {
                                        reject(this.errorVal)
                                    } else {
                                        let x = error_cb(this.errorVal)
                                        resolvePromise(promise2, x, resolve, reject)
                                    }
                                } catch (err) {
                                    reject(err)
                                }
                            })
                        })
                    }
                }
            )
            return promise2
        }

        catch = (err_cb) => {
            this.then(undefined, err_cb)
        }
    }