手寫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)系作者
【社區(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)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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