实现then方法
then(onFulFilled,onRejected){
this.onFulFilled = onFulFilled;
this.onRejected = onRejected;
}
回调执行顺序
再执行resolve的时候执行then方法回调,会存在一个问题,无法拿到回调方法的,通过延迟执行来拿到回调方法,这里使用的时微任务函数queueMicrotask
const resolve = (value) => {
if(this.statu === PROMISE_STATUS_PENDING){
this.statu = PROMISE_STATUS_FULFILLED //在改变状态的时候不需要延迟,否则会造成
queueMicrotask(() => {
this.value = value
console.log('resolve函数调用了');
// 这里直接调用会报错,因为代码是从上往下执行,执行到这里的时候根本无法拿到onFulFilled,
// 可以使用使用setTimeout(() =>,0)宏任务,queueMicrotask() 微任务 ,本质都是一样延迟执行代码
// 这里使用setTimeout不好,因为在执行原生的then方法是一个微任务
this.onFulFilled(this.value);
});
}
}
// 手写Promsie
const PROMISE_STATUS_PENDING = 'pending'
const PROMISE_STATUS_FULFILLED = 'fulfilled'
const PROMISE_STATUS_REJECTED = 'rejected'
class HyPromise{
constructor(excutor){
this.statu = PROMISE_STATUS_PENDING
this.value = undefined
this.reason = undefined
const resolve = (value) => {
if(this.statu === PROMISE_STATUS_PENDING){
this.statu = PROMISE_STATUS_FULFILLED //在改变状态的时候不需要延迟,否则会造成
queueMicrotask(() => {
this.value = value
console.log('resolve函数调用了');
// 这里直接调用会报错,因为代码是从上往下执行,执行到这里的时候根本无法拿到onFulFilled,
// 可以使用使用setTimeout(() =>,0)宏任务,queueMicrotask() 微任务 ,本质都是一样延迟执行代码
// 这里使用setTimeout不好,因为在执行原生的then方法是一个微任务
this.onFulFilled(this.value);
});
}
}
const reject = (reason) => {
if(this.statu === PROMISE_STATUS_PENDING){
this.statu = PROMISE_STATUS_REJECTED
queueMicrotask(() => {
this.reason = reason
console.log('reject函数调用了');
this.onRejected( this.reason);
})
}
}
excutor(resolve,reject)
}
then(onFulFilled,onRejected){
this.onFulFilled = onFulFilled;
this.onRejected = onRejected;
}
}
const promise = new HyPromise((resolve,reject) => {
console.log('执行者函数调用');
reject('22222');
resolve('1111111')
})
// 调用then方法
promise.then(res => {
console.log('res:',res);
},err => {
console.log('err:',err);
})
// 存在的问题:没有做到独立调用,没有err是报错,没有链式调用
promise.then(res => {
console.log('res2:',res);
},err => {
console.log('err2:',err);
})