手写Promise-then方法的设计

then方法的设计

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

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)