封装一个 Promise 对象。了解其原理

直接上代码

class MYPromise {
  static PADDING = 'padding'
  static FULFILLED = 'fulfilled'
  static REJECTED = 'rejected'

  constructor(execute) {

    this.state = MYPromise.PADDING;// 初始化 状态
    this.value = undefined;// 初始化 成功值
    this.reason = undefined;// 初始化 失败值
    this.onResolvedCallback = [];// 成功回调存起来的数组
    this.onRejectedCallback = [];// 失败
    let resolve = value => {
      if (this.state == MYPromise.PADDING) {
        this.value = value;// 赋值
        this.state = MYPromise.FULFILLED;// 改变状态
        this.onResolvedCallback.forEach(fn => fn(value));
      }
    }
    let reject = reason => {
      if (this.state = MYPromise.PADDING) {
        this.reason = reason;// 赋值
        this.state = MYPromise.REJECTED;// 改变状态
        this.onRejectedCallback.forEach(fn => fn(reason))
      }
    }
    try {
      // 默认状态是 padding 等待,resolve 执行改变状态为成功,reject 执行,改变状态为失败
      execute(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }

  // then 有两个参数,第一个是成功回调,第二个是失败回调
  // 两个参数都是函数
  static then(onFulfilled, onRejected) {
    if (this.state = MYPromise.FULFILLED) {
      onFulfilled(this.value);
    }
    if (this.state = MYPromise.REJECTED) {
      onRejected(this.reason)
    }
    if (this.state == MYPromise.PADDING) {
      this.onResolvedCallback.push(onFulfilled);
      this.onRejectedCallback.push(onRejected);
    }
  }

  static all(promises) {
    let resolveArr = []
    return new MYPromise((resolve, reject) => {
      promises.forEach(promise => {
        promise.then(value => {
          resolveArr.push(value);
          if (resolveArr.length == promises.length) {
            resolve(resolveArr);
          }
        }, reason => {
          reject(reason)
        })
      })
    })
  }

  static race(promises) {
    return new MYPromise((resolve, reject) => {
      promises.forEach(promise => {
        promise.then(value => {
          resolve(value)
        }, reason => {
          reject(reason)
        })
      })
    })
  }

}

let p = new MYPromise((resolve, reject) => {
  resolve('成功');
  // reject('失败')
})
let p2 = new MYPromise((resolve, reject) => {
  resolve('成功');
  // reject('失败')
})
p.then(resolve => {

}, reject => {

})

MYPromise.all([p, p2]).then(resolve => {
    console.log('成功');
  }, reject => {

  }
)
MYPromise.race([p, p2]).then(resolve => {

  }, reject => {

  }
)

 

posted @ 2021-03-25 14:02  张_Ning  阅读(148)  评论(0编辑  收藏  举报