黄莆课堂手搓Promise

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);
})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容