ES5之理解與手寫實(shí)現(xiàn)Promise

  • 誕生:
    • commonJS社區(qū)提出Promise規(guī)范,用于統(tǒng)一處理異步回調(diào),后被列入ECMAScript2015標(biāo)準(zhǔn)
  • 主要特點(diǎn):
    • 本質(zhì)就是Promise類,用于表示任務(wù)最終結(jié)果是成功還是失敗
    • 鏈?zhǔn)秸{(diào)用,解決大量的回調(diào)嵌套,避免回調(diào)地獄,代碼結(jié)構(gòu)清晰
    • 同步與異步回調(diào)均可處理
  • 狀態(tài)(state):
    • pending(等待,promise的初始狀態(tài))
    • fulfuilled(成功)
    • rejected(失?。?/li>

只存在pending-->fulfuilled 或者 pending-->rejected。fulfuilled 與 rejected 只會(huì)執(zhí)行一個(gè)。

  • 手寫實(shí)現(xiàn)(參考系統(tǒng)promise):
    • 原型對(duì)象函數(shù)
      • excutor函數(shù)
        需要立即執(zhí)行,所以在構(gòu)造函數(shù)中直接調(diào)用
      • reslove 與 reject
        使用箭頭函數(shù),保留this指向
      • then函數(shù)
        判斷state,處理同步和異步(異步必須在回調(diào)后才會(huì)改變state)
      • finally函數(shù)
        無(wú)論promise對(duì)象返回成功還是失敗,finally都會(huì)被執(zhí)行一次,并且回調(diào)結(jié)果可以執(zhí)行then函數(shù)
      • catch函數(shù)
        then函數(shù)不執(zhí)行success回調(diào)版本
    • 靜態(tài)函數(shù)
      • all
        處理異步并發(fā),按照異步代碼調(diào)用順序得到異步代碼執(zhí)行結(jié)果,參數(shù)為數(shù)組,數(shù)組值的順序即結(jié)果的順序,返回值也是promise對(duì)象
      • resolve
        對(duì)value進(jìn)行promise包裝,返回值為promise
// promise的三種狀態(tài)
// pending 任何回調(diào)之前
const PENDING = "pending"
// fulfuilled 成功回調(diào)
const FULFUILLED = "fulfuilled"
// rejected 失敗回調(diào)
const REJECTED = "rejected"

// promise是類對(duì)象
class MyPromise {
    constructor (excutor) {
        // excutor異常處理
        try {
            // 外部excutor對(duì)象,傳入兩個(gè)函數(shù)對(duì)象,對(duì)應(yīng) reslove  reject
            excutor(this.reslove, this.reject)
        } catch (error) {
            this.reject(error)
        }
    }
    // 初始化狀態(tài)
    status = PENDING
    // 存放所有的成功回調(diào)函數(shù)
    sucCallBack = []
    // 存放所有的失敗回調(diào)函數(shù)
    failCallBack = []

    value = undefined
    reason = undefined

    reslove = value => {
        // 用于阻止非 pending 的調(diào)用(執(zhí)行 resolve 和 reject 必須二選一)
        if (this.status !== PENDING) return
        
        this.status = FULFUILLED
        this.value = value
        // FIFO
        while (this.sucCallBack.length) {
            this.sucCallBack.shift()()
        }
    }

    reject = reason => {
        // 用于阻止非 pending 的調(diào)用(執(zhí)行 resolve 和 reject 必須二選一)
        if (this.status !== PENDING) return

        this.status = REJECTED
        this.reason = reason
        // FIFO
        while (this.failCallBack.length) {
            this.failCallBack.shift()()
        }
    }
    // 是能被鏈?zhǔn)秸{(diào)用的,因此then有返回值,是promise
    then (sucCallBack, failCallBack) {
        // then 參數(shù)變?yōu)榭蛇x
        sucCallBack = sucCallBack ? sucCallBack : value => value
        failCallBack = failCallBack ? failCallBack : reason => { throw reason }
        // 需要返回新的promise,用于實(shí)現(xiàn)then 鏈?zhǔn)秸{(diào)用
        let newPromise = new MyPromise((resolve, reject) => {
            // 分情況討論:同步 和 異步 回調(diào)處理
            // 同步
            // 調(diào)用then之前,同步status狀態(tài)已發(fā)生變化
            if (this.status === FULFUILLED) {
                setTimeout(() => {
                    try {
                        // 成功回調(diào)函數(shù)
                        let newValue = sucCallBack(this.value)
                        resolvePromise(newPromise, newValue, resolve, reject)   
                    } catch (error) {
                        // 在新promise中處理異常
                        reject(error)
                    }
                }, 0);
            }
            else if (this.status === REJECTED) {

                setTimeout(() => {
                    try {
                        // 失敗回調(diào)函數(shù)
                        let newValue = failCallBack(this.reason)
                        resolvePromise(newPromise, newValue, resolve, reject)   
                    } catch (error) {
                        // 在新promise中處理異常
                        reject(error)
                    }
                }, 0);

                
            }
            // 異步
            else
            {
                // 異步status狀態(tài)未發(fā)生變化,先對(duì)回調(diào)函數(shù)做保存
                this.sucCallBack.push(() => {
                    setTimeout(() => {
                        try {
                            // 成功回調(diào)函數(shù)
                            let newValue = sucCallBack(this.value)
                            resolvePromise(newPromise, newValue, resolve, reject)   
                        } catch (error) {
                            // 在新promise中處理異常
                            reject(error)
                        }
                    }, 0);
                })
                this.failCallBack.push(() => {
                    failCallBack
                })
            }
        })
        return newPromise
    }
    // 無(wú)論promise對(duì)象返回成功還是失敗,finally都會(huì)被執(zhí)行一次
    finally (callback) {
        // then 的返回值是promise
        // 不管value是promise對(duì)象還是普通值,一律返回promise對(duì)象,保證異步promise的執(zhí)行順序
        return this.then(value => {
            return MyPromise.resolve(callback()).then(()=>value)
        },reason => {
            return MyPromise.resolve(callback()).then(()=>{throw reason})
        })
    }

    // 只調(diào)用失敗
    catch (failCallBack) {
        return this.then(undefined, failCallBack)
    }
    // 處理異步并發(fā),按照異步代碼調(diào)用順序得到異步代碼執(zhí)行結(jié)果,參數(shù)為數(shù)組,數(shù)組值的順序即結(jié)果的順序,返回值也是promise對(duì)象
    static all(array) {
 
        let result = []
        let index = 0
        
        return new MyPromise((resolve, reject)=>{

            function addData(key, value) {
                result[key] = value
                index ++
                // 保證所有(同步于異步)結(jié)果都獲取到后,在resolve
                if (index === array.length) {
                    resolve(result)
                }
            }
            array.forEach((item, index) => {
                if (item instanceof MyPromise) {
                    // promise對(duì)象
                    item.then(value=>addData(index,value),reason=>reject(reason))
                }
                else 
                {
                    // 普通值
                    addData(index, item)
                }
            })
        })
    }
    // 對(duì)value進(jìn)行promise包裝,返回值為promise
    static resolve(value) {
        if (value instanceof MyPromise) {
            return value
        }
        return new MyPromise(reslove=>{
            reslove(value)
        })
    }
    
}

function resolvePromise(newPromise, newValue, resolve, reject) {
    // 分情況討論:
    // 原promise(防止循環(huán)調(diào)用)
    if (newPromise === newValue) {
        // 在新promise中處理異常
        reject("cycle call promise")
    }
    // MyPromise
    if (newValue instanceof MyPromise) {
        // 將狀態(tài)傳遞給下一個(gè)promise對(duì)象
        // ?? ---- 實(shí)現(xiàn)then鏈?zhǔn)疆惒巾樞蛘{(diào)用
        // newValue.then(value=>resolve(value),value=>reject(value))
        newValue.then(resolve,reject)
    }
    // 普通值
    else
    {
        // 在新promise中處理成功回調(diào)
        resolve(newValue)
    }
}
module.exports = MyPromise
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容