手写简版promise（三）实现周边方法

周边方法

promise.resolve()
promise.reject()
promise.all()
promise.race()

1、实现MyPromise.resolve()

MyPromise.resolve这个可以使用MyPromise类调用，但却不能使用实例之后的对象调用说明这个方法是自身的属性，是静态方法我们前面需要加static 描述，这个方法很简单，就是我们在实例化MyPromise这个类时候需要resolve就可以。reject类似

static resolve(val) {
    return new MyPromise((resolve, reject) => {
      resolve(val)
    })
  }

2、实现MyPromise.reject()

static reject(val) {
    return new MyPromise((resolve, reject) => {
      reject(val)
    })
  }

上面两个方法的测试代码

3、实现MyPromise.all()

因为all方法是当所有的promise返回成功之后才会返回值，所以使用一个变量来存储成功的次数去判断

static all(arr) {
    return new MyPromise((resolve, reject) => {
      let lists = []
      let length = 0
      arr.forEach(item => {
        item.then(res => {
          length++
          lists.push(res)
          if (length >= arr.length) {
            resolve(lists)
          }
        }, err => {
          reject(err);
        })
      })
    })
  }

测试代码

4、实现MyPromise.race()

这个暂时有点儿小缺陷，之后补一下

static race(arr) {
    return new MyPromise((resolve, reject) => {
      arr.forEach(item => {
        item.then(res => {
          resolve(res)
        }, err => {
          reject(err);
        })
      })
    })
  }

这部分的完整代码

export default class MyPromise {
  constructor(fn) {
    this['[[PromiseState]]'] = 'pending'
    this['[[PromiseResult]]'] = undefined

    this.resolveQueue = [] // 存储then方法中的成功的回调函数
    this.rejectQueue = [] // 存储then方法中的失败的回调函数

    fn(this._resolve.bind(this), this._reject.bind(this))
  }
  _resolve(successRes) {
    this['[[PromiseState]]'] = 'fulfilled'
    this['[[PromiseResult]]'] = successRes

    // 这段代码会造成死循环,所以重写了
    // let run = () => {
    //   this.resolveQueue.forEach(fn => {
    //     fn && fn(successRes)
    //   })
    // }

    let run = () => {
      let cb
      while (cb = this.resolveQueue.shift()) {
        cb && cb(successRes)
      }
    }
    let observe = new MutationObserver(run)
    observe.observe(document.body, {
      attributes: true
    })
    document.body.setAttribute('id', 'box')
  }
  _reject(errRes) {
    this['[[PromiseState]]'] = 'rejected'
    this['[[PromiseResult]]'] = errRes
    let run = () => {
      let cb
      while (cb = this.rejectQueue.shift()) {
        cb && cb(errRes)
      }
    }
    let observe = new MutationObserver(run)
    observe.observe(document.body, {
      attributes: true
    })
    document.body.setAttribute('id', 'box')

  }
  static resolve(val) {
    return new MyPromise((resolve, reject) => {
      resolve(val)
    })
  }
  static reject(val) {
    return new MyPromise((resolve, reject) => {
      reject(val)
    })
  }
  static race(arr) {
    return new MyPromise((resolve, reject) => {
      arr.forEach(item => {
        item.then(res => {
          resolve(res)
        }, err => {
          reject(err);
        })
      })
    })
  }
  static all(arr) {
    return new MyPromise((resolve, reject) => {
      let lists = []
      let length = 0
      arr.forEach(item => {
        item.then(res => {
          length++
          lists.push(res)
          if (length >= arr.length) {
            resolve(lists)
          }
        }, err => {
          reject(err);
        })
      })
    })
  }

  then(onResolve, onReject) {
    this.resolveQueue.push(onResolve)
    this.rejectQueue.push(onReject)
  }
}