手写Promise-then方法的设计

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