手写实现一个Promise

48 阅读1分钟
let promise = new Promise((resolve, reject) => {
  console.log('hello');
  resolve('这次一定');
})
class Commitment {
  static PENDING = '待定'; static FULFILLED = '成功'; static REJECTED = '拒绝';
  constructor(func) {
    this.status = Commitment.PENDING;
    this.onFULFILLEDCallbacks = [];
    this.onRJECTEDCallbacks = [];
    try() {
      func(this.resolve.bind(this), this.reject.bind(this)); // 用this调用自身class的方法
    } catch(e) {
      this.reject(e)
    }
    
  }
  // 类方法
  resolve (result) {
    setTimeout(() => {
        if (this.status === Commitment.PENDING) {
          this.status = Commitment.FULFILLED
          this.result = result
          this.onFULFILLEDCallbacks.forEach(callback => {
            callback(this.result);
          })
        }
    })
  }
  // 类方法
  reject (result) {
    setTimeout(() => {
      if (this.status === Commitment.PENDING) {
          this.status = Commitment.REJECTED
          this.result = result
          this.onREJECTEDCallbacks.forEach(callback => {
            callback(this.result);
          })
        }
    })
  }
  then (onFULFILED, onREJECTED) {
    return new Commitment((resolve, reject) => {
         onFULFILED = typeof onFULFILED === 'function' ? onFULFILED : () => {}
        onREJECTED = typeof onREJECTED === 'function' ? onREJECTED : () => {}
        if (this.status === commitment.PENDING) {
          this.onFULFILLEDCallbacks.push(onFULFILED);
          this.onREJECTEDCallbacks.push(onREJECTED);
        }
        if (this.status === Commitment.FULFILLED) {
          setTimeout(() => {
              onFULFILED(this.result)
          })
        }
        if (this.status === Commitment.REJECTED) {
          setTimeout(() => {
              onREJECTED(this.result)
          })
        }
    })
    
  }
}

三个状态

  • pending
  • fulfilled
  • rejected

流程点:

1、实例类,加形参,传参
2、加方法resolve、reject、then
3、报错走reject
4、异步实现(重点)
5、setTimeout()里resolve的情况 (难点)
6、链式调用