前端技术

黄莆课堂手搓Promise

2024-10-19  本文已影响0人  黄莆芸哥

Promise A+
1、Promise有哪些状态?对应值有哪些?
Promise:pending | fulfilled | rejected
executor: new Promise时候需要立即执行,接受两个参数resolve+ reject

2、Promise默认状态是?状态是如何流转的?

3、Promise返回值?
then:接受onFulfilled 和onRejected
如果then,promise已经成功,执行onFulfilled,参数value
如果then,promise已经失败了,执行onRejected,参数reason
then中的任何的error => onRejected

4、手写Promise

const PROMISE_STATE = {
PENDING:0,
FULFILLED:1,
REJECTED:2
}

class MyPromise{
#result
#state = PROMISE_STATE.PENDING
#callback = []

constructor(executor){
    executor(this.#resolve.bind(this),this.#reject.bind(this) )
}

#resolve(value){
    if(this.#state !== PROMISE_STATE.PENDING) return

    this.#result = value 
    this.#state = PROMISE_STATE.FULFILLED 

    queueMicrotask( () => {
        this.#callback.forEach(cb => {
            cb()
        })
    })
}
#reject(reason){ }

then(onFulfilled, onRejected){
    return new MyPromise((resolve,reject) => { 
        if(this.#state === PROMISE_STATE.PENDING){
            this.#callback.push(() => {
                resolve(onFulfilled(this.#result))//把回调函数的返回值,作为resolve的参数,传给新的Promise
            }) 
        }
        else if(this.#state === PROMISE_STATE.FULFILLED){
            queueMicrotask(() => {  
                resolve(onFulfilled(this.#result)) //把回调函数的返回值,作为resolve的参数,传给新的Promise
            })
        }
    })

}       

}

const mp = new MyPromise( (resolve,reject) => {
setTimeout( () => {
resolve("芸总最屌")
},520)
})

mp.then( (result) => {
console.log("读取数据第一次",result);
return "芸总最帅"
})
.then(r => {
console.log("读取数据第二次",r);
return "芸总是大佬"
})
.then(r => {
console.log("读取数据第三次",r);
})

上一篇 下一篇

猜你喜欢

热点阅读