手寫promise

1. promise核心

// 封裝promise
// 1. Promise 就是一個(gè)類滞诺，在執(zhí)行這個(gè)類的時(shí)候，需要傳遞一個(gè)執(zhí)行器進(jìn)去环疼，執(zhí)行去會(huì)立即執(zhí)行
// 2. Promise 中有三個(gè)狀態(tài)习霹，分別為：成功(fulfilled)、失敗(rejected)炫隶、等待(pending)淋叶；一旦狀態(tài)確定就不可更改
// 3. resolve和reject函數(shù)用來(lái)更改狀態(tài)
// 4. then 方法內(nèi)部做的事情就是判斷狀態(tài)，根據(jù)狀態(tài)調(diào)用不同的回調(diào)函數(shù)(成功失敗)
// 5. then 成功回調(diào)有一個(gè)參數(shù)伪阶，表示成功之后的值煞檩，then失敗回調(diào)有一個(gè)參數(shù)，表示失敗的原因

cconst PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise{
    // 當(dāng)前執(zhí)行狀態(tài)
    status = PENDING
    // 成功值
    value = undefined
    // 失敗原因
    reason = undefined

    // new Promise是立即執(zhí)行
    constructor(executor){
        executor(this.resolve,this.reject)
    }

    resolve = value => {
        // 如果狀態(tài)不在等待 阻止程序向下執(zhí)行
        if(this.status !== PENDING)return
        // 狀態(tài)變更為成功
        this.status  = FULFILLED
        // 保存成功之后的值
        this.value = value
    }

    reject = reason => {
        if(this.status !== PENDING)return
        this.status = REJECTED
        this.reason = reason
    }

    // then中的回調(diào)
    then(successCallback, failCallback){
        if(this.status === FULFILLED){
            successCallback(this.value)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }
    }
}

// node提供的導(dǎo)出方式
module.exports = MyPromise

使用


const MyPromise = require('./MyPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})

promise加入異步邏輯

前面的promise沒(méi)有加異步的情況栅贴。增加異步就是在then中判斷斟湃，如果狀態(tài)沒(méi)有變更，保存成功回調(diào)和失敗回調(diào)檐薯；在resolve或reject時(shí)判斷是否有需要執(zhí)行的成功或者失敗回調(diào)凝赛，有就執(zhí)行

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise{
    // 當(dāng)前執(zhí)行狀態(tài)
    status = PENDING
    // 成功值
    value = undefined
    // 失敗原因
    reason = undefined
    // 成功回調(diào)
    successCallback = undefined
    // 失敗回調(diào)
    failCallback = undefined

    // new Promise是立即執(zhí)行
    constructor(executor){
        executor(this.resolve,this.reject)
    }

    resolve = value => {
        // 如果狀態(tài)不在等待 阻止程序向下執(zhí)行
        if(this.status !== PENDING)return
        // 狀態(tài)變更為成功
        this.status  = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判斷成功回調(diào)是否存在 如果存在 調(diào)用
        this.successCallback && this.successCallback(this.value)
    }

    reject = reason => {
        if(this.status !== PENDING)return
        this.status = REJECTED
        this.reason = reason
    }

    // then中的回調(diào)
    then(successCallback, failCallback){
        if(this.status === FULFILLED){
            successCallback(this.value)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 將成功回調(diào)和失敗回調(diào)存儲(chǔ)起來(lái)
            this.successCallback = successCallback
            this.failCallback = failCallback
        }
    }
}

module.exports = MyPromise

then方法多次調(diào)用添加多個(gè)處理函數(shù)

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise{
    // 當(dāng)前執(zhí)行狀態(tài)
    status = PENDING
    // 成功值
    value = undefined
    // 失敗原因
    reason = undefined
    // 成功回調(diào)
    successCallback = []
    // 失敗回調(diào)
    failCallback = []

    // new Promise是立即執(zhí)行
    constructor(executor){
        executor(this.resolve,this.reject)
    }

    resolve = value => {
        // 如果狀態(tài)不在等待 阻止程序向下執(zhí)行
        if(this.status !== PENDING)return
        // 狀態(tài)變更為成功
        this.status  = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判斷成功回調(diào)是否存在 如果存在 調(diào)用
        while(this.successCallback.length){
            this.successCallback.shift()(this.value)
        }
    }

    reject = reason => {
        if(this.status !== PENDING)return
        this.status = REJECTED
        this.reason = reason
        while(this.failCallback.length){
            this.failCallback.shift()(this.reason)
        }
    }

    // then中的回調(diào)
    then(successCallback, failCallback){
        if(this.status === FULFILLED){
            successCallback(this.value)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 將成功回調(diào)和失敗回調(diào)存儲(chǔ)起來(lái)
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    }
}

module.exports = MyPromise




let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})
promise.then(value => {
    console.log(value);
})
promise.then(value => {
    console.log(value);
})

then方法的鏈?zhǔn)秸{(diào)用

鏈?zhǔn)秸{(diào)用1

then(successCallback, failCallback){
    // 返回一個(gè)新的promise，新的promise狀態(tài)原始都是pending
    let promise2 = new MyPromise((resolve, reject) => {
        // 這里面的this是上一個(gè)promise的this
        if(this.status === FULFILLED){
            let x = successCallback(this.value);
            resolve(x) // 這里執(zhí)行新的promise里面的resolve 改為this.resolve就不行
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 將成功回調(diào)和失敗回調(diào)存儲(chǔ)起來(lái)
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    })
    return promise2
}

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})
promise.then(value => {
    console.log(value);
    return 100;
}).then(value => {
    console.log(value);
})

鏈?zhǔn)秸{(diào)用2

function resolvePromise(x, resolve, reject) {
    // 判斷 x 的值是普通值還是 primise 對(duì)象
    // 如果是普通值 直接調(diào)用 resolve 
    // 如果是 promise 對(duì)象 查看 promise 對(duì)象返回的結(jié)果
    // 再根據(jù) promise 對(duì)象的返回結(jié)果 決定調(diào)用 resolve 還是 調(diào)用 reject (這兩都是外部promise的方法)

    if (x instanceof MyPromise) {
        // promise 對(duì)象
        x.then(resolve, reject)
    } else {
        // 普通值
        resolve(x)
    }
}
then(successCallback, failCallback){
    let This = this;
    let promise2 = new MyPromise((resolve, reject) => {
        if(this.status === FULFILLED){
            let x = successCallback(this.value);
            resolvePromise(x,resolve,reject);
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 將成功回調(diào)和失敗回調(diào)存儲(chǔ)起來(lái)
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    })
    return promise2
}



const MyPromise = require('./MyPromise')

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})

function other(){
    return new MyPromise((resolve, reject) => {
        resolve('other')
    })
}

promise.then(value => {
    console.log(value);
    return other()
}).then(res => {
    console.log(res);
})

then鏈?zhǔn)秸{(diào)用識(shí)別對(duì)象自己返回自己

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})


let p1 = promise.then(value => {
    console.log(value);
    return p1
})
p1.then(res => {
    console.log(res);
},err => {
    console.log(err);
})






function resolvePromise(promise2,x, resolve, reject) {
    // 判斷 x 的值是普通值還是 primise 對(duì)象
    // 如果是普通值 直接調(diào)用 resolve 
    // 如果是 promise 對(duì)象 查看 promise 對(duì)象返回的結(jié)果
    // 再根據(jù) promise 對(duì)象的返回結(jié)果 決定調(diào)用 resolve 還是 調(diào)用 reject

    if(promise2 === x){
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        // promise 對(duì)象
        x.then(resolve, reject)
    } else {
        // 普通值
        resolve(x)
    }
}

then(successCallback, failCallback){
    let This = this;
    let promise2 = new MyPromise((resolve, reject) => {
        if(this.status === FULFILLED){
            setTimeout(()=>{
                let x = successCallback(this.value);
                resolvePromise(promise2,x,resolve,reject);
            },0)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 將成功回調(diào)和失敗回調(diào)存儲(chǔ)起來(lái)
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    })
    return promise2
}

捕獲錯(cuò)誤

執(zhí)行器里面的錯(cuò)誤坛缕，將錯(cuò)誤信息存入錯(cuò)誤原因墓猎，在then的時(shí)候第二個(gè)回調(diào)打印這個(gè)錯(cuò)誤

// new Promise是立即執(zhí)行
constructor(executor) {
    try{
        executor(this.resolve, this.reject)
    }catch(e){
        this.reject(e)
    }
}


let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})

promise.then(res => {
    console.log(res);
},err => {
    console.log(err);
})

then里面的錯(cuò)誤，在后面的then里面輸出

let promise = new MyPromise((resolve, reject) => {
    resolve('成功')
})

promise.then(res => {
    console.log(res);
    throw new Error('then error')
}).then(res => {
    console.log(res);
},err => {
    console.log(err);
})



then(successCallback, failCallback){
    let This = this;
    let promise2 = new MyPromise((resolve, reject) => {
        if(this.status === FULFILLED){
            setTimeout(()=>{
                try{
                    let x = successCallback(this.value);
                    resolvePromise(promise2,x,resolve,reject);
                }catch(e){
                    reject(e)
                }
            },0)
        } else if(this.status === REJECTED) {
            failCallback(this.reason)
        }else{
            // 等待
            // 將成功回調(diào)和失敗回調(diào)存儲(chǔ)起來(lái)
            this.successCallback.push(successCallback)
            this.failCallback.push(failCallback)
        }
    })
    return promise2
}

處理一下異步和其它的錯(cuò)誤

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    // 當(dāng)前執(zhí)行狀態(tài)
    status = PENDING
    // 成功值
    value = undefined
    // 失敗原因
    reason = undefined
    // 成功回調(diào)
    successCallback = []
    // 失敗回調(diào)
    failCallback = []

    // new Promise是立即執(zhí)行
    constructor(executor) {
        try{
            executor(this.resolve, this.reject)
        }catch(e){
            this.reject(e)
        }
    }

    resolve = value => {
        // 如果狀態(tài)不在等待 阻止程序向下執(zhí)行
        if (this.status !== PENDING) return
        // 狀態(tài)變更為成功
        this.status = FULFILLED
        // 保存成功之后的值
        this.value = value
        // 判斷成功回調(diào)是否存在 如果存在 調(diào)用
        while (this.successCallback.length) {
            this.successCallback.shift()()
        }
    }

    reject = reason => {
        if (this.status !== PENDING) return
        this.status = REJECTED
        this.reason = reason
        while (this.failCallback.length) {
            this.failCallback.shift()()
        }
    }

    // then中的回調(diào)
    then(successCallback, failCallback){
        // 每次this都是上一個(gè)promise赚楚。
        let This = this;
        let promise2 = new MyPromise((resolve, reject) => {
            if(this.status === FULFILLED){
                setTimeout(()=>{
                    try{
                        let x = successCallback(this.value);
                        resolvePromise(promise2,x,resolve,reject);
                    }catch(e){
                        reject(e)
                    }
                },0)
            } else if(this.status === REJECTED) {
                setTimeout(()=> {
                    try{
                        let x = failCallback(this.reason);
                        resolvePromise(promise2,x,resolve,reject);
                    }catch(e){
                        reject(e)
                    }
                })
            }else{
                // 等待
                // 將成功回調(diào)和失敗回調(diào)存儲(chǔ)起來(lái)
                this.successCallback.push(() => {
                    setTimeout(()=>{
                        try{
                            let x = successCallback(this.value);
                            resolvePromise(promise2,x,resolve,reject);
                        }catch(e){
                            reject(e)
                        }
                    },0)
                })
                this.failCallback.push(() => {
                    setTimeout(()=> {
                        try{
                            let x = failCallback(this.reason);
                            resolvePromise(promise2,x,resolve,reject);
                        }catch(e){
                            reject(e)
                        }
                    })
                })
            }
        })
        return promise2
    }


}

function resolvePromise(promise2,x, resolve, reject) {
    // 判斷 x 的值是普通值還是 primise 對(duì)象
    // 如果是普通值 直接調(diào)用 resolve 
    // 如果是 promise 對(duì)象 查看 promise 對(duì)象返回的結(jié)果
    // 再根據(jù) promise 對(duì)象的返回結(jié)果 決定調(diào)用 resolve 還是 調(diào)用 reject

    if(promise2 === x){
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    if (x instanceof MyPromise) {
        // promise 對(duì)象
        x.then(resolve, reject)
    } else {
        // 普通值
        resolve(x)
    }
}

module.exports = MyPromise

then方法的參數(shù)變?yōu)榭蛇x參數(shù)


let promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功')
    },1000)
})

promise.then()
.then(res => {
    console.log(res);
})



then(successCallback, failCallback){
    // 給then回調(diào)賦一個(gè)方法毙沾，傳入什么返回什么
    successCallback = successCallback ? successCallback : value => value
    failCallback = failCallback ? failCallback : reason => {throw reason}
    
    ...
}

promise.all 方法

let p1 = new Promise((resolve, reject) => {
    setTimeout(()=>{
        resolve('p1')
    },2000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(()=>{
        resolve('p2')
    },0)
})
Promise.all(['a','b',p1,p2,'c']).then(res => {console.log(res)})
// ['a','b','p1','p2','c']
// 全部執(zhí)行完，然后按給定順序返回值




static all(array){
    let result = [];
    let index = 0
    function addData (key, value) {
        result[key] = value;
        index ++
        if(index === array.length){
            resolve(result)
        }
    }
    return new MyPromise((resolve, reject) => {
        for(let i = 0; i < array.length; i++){
            let current  = array[i];
            if(current instanceof MyPromise){
                // promise對(duì)象
                current.then(value => addData(i,value), reason => reject(reason))
            }else{
                // 普通
                addData(i, array)
            }
        }
        // 這時(shí)是for循環(huán)結(jié)束就執(zhí)行了宠页，result還沒(méi)全
        // resolve(result)
    })
}

promise.resolve

const MyPromise = require('./MyPromise')

let p = new MyPromise((resolve, reject) => {
    resolve(99)
})

MyPromise.resolve(10).then(res => {console.log(res);})
MyPromise.resolve(p).then(res => {console.log(res);})



static resolve(value){
    if(value instanceof MyPromise){
        // promise對(duì)象
        return value;
    }else{
        // 普通
        return new MyPromise((resolve,reject) => {
            resolve(value)
        })
    }
}

promise finally

finally(callback){
    return this.then(value => {
        callback()
        return value
    },reason => {
        callback()
        throw reason
    })
}


finally(callback){
    return this.then(value => {
        return MyPromise.resolve(callback()).then(() => value)
    },reason => {
        return MyPromise.resolve(callback()).then(() => {throw reason})
    })
}

promise catch

catch(failCallback){
    return this.then(undefined, failCallback)
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末左胞，一起剝皮案震驚了整個(gè)濱河市寇仓，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌烤宙，老刑警劉巖遍烦，帶你破解...
沈念sama閱讀 218,386評(píng)論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異门烂，居然都是意外死亡乳愉，警方通過(guò)查閱死者的電腦和手機(jī)兄淫，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,142評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門屯远，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人捕虽，你說(shuō)我怎么就攤上這事慨丐。” “怎么了泄私？”我有些...
開(kāi)封第一講書(shū)人閱讀 164,704評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵房揭，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我晌端，道長(zhǎng)捅暴，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,702評(píng)論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任咧纠，我火速辦了婚禮蓬痒，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘漆羔。我一直安慰自己梧奢，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,716評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布演痒。她就那樣靜靜地躺著亲轨，像睡著了一般。火紅的嫁衣襯著肌膚如雪鸟顺。梳的紋絲不亂的頭發(fā)上惦蚊，一...
開(kāi)封第一講書(shū)人閱讀 51,573評(píng)論 1贊 305
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音讯嫂，去河邊找鬼养筒。笑死，一個(gè)胖子當(dāng)著我的面吹牛端姚，可吹牛的內(nèi)容都是我干的晕粪。我是一名探鬼主播，決...
沈念sama閱讀 40,314評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼渐裸，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼巫湘！你這毒婦竟也來(lái)了装悲？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,230評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤尚氛，失蹤者是張志新（化名）和其女友劉穎诀诊，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體阅嘶，經(jīng)...
沈念sama閱讀 45,680評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡属瓣，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,873評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了讯柔。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抡蛙。...
茶點(diǎn)故事閱讀 39,991評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖魂迄，靈堂內(nèi)的尸體忽然破棺而出粗截，到底是詐尸還是另有隱情，我是刑警寧澤捣炬，帶...
沈念sama閱讀 35,706評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布熊昌，位于F島的核電站，受9級(jí)特大地震影響湿酸，放射性物質(zhì)發(fā)生泄漏婿屹。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,329評(píng)論 3贊 330
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一推溃、第九天我趴在偏房一處隱蔽的房頂上張望昂利。院中可真熱鬧，春花似錦美莫、人聲如沸页眯。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,910評(píng)論 0贊 22
一樁弒父案厢呵，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)窝撵。三九已至，卻和暖如春襟铭，著一層夾襖步出監(jiān)牢的瞬間碌奉，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,038評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工寒砖，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留赐劣，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,158評(píng)論 3贊 370
代替公主和親
正文我出身青樓哩都，卻偏偏與公主長(zhǎng)得像魁兼，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子漠嵌，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,941評(píng)論 2贊 355