all-of-javascript icon indicating copy to clipboard operation
all-of-javascript copied to clipboard

实现一个 Promise

Open cbbfcd opened this issue 6 years ago • 0 comments

/**
* promise 实现
* copyed from https://juejin.im/post/5b83cb5ae51d4538cc3ec354
*/

isFunction = (f) => typeof f === 'function'

// promise 状态
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class MyPromise {
  constructor(handle){
    if(!isFunction(handle)){
      throw new Error('my promise must accept a function as a parameter')
    }

    // 初始状态都是 pending
    this._status = PENDING

    // 初始值
    this._value = undefined

    // 成功回调队列
    this._fulfilledQueues = []

    // 失败回调队列
    this._rejectedQueues = []

    // 构造初始化(handle函数并不会放进 micro tasks中,而是在主线程直接执行)
    try {
      handle(this._resolve.bind(this), this._reject.bind(this))
    } catch (error) {
      this._reject(error)
    }
  }

  _resolve(val){
    const run = () => {
      if(this._status !== PENDING) return
      this._status = FULFILLED
      // 执行成功队列
      const runFulFilled = (value) => {
        let cb
        while(cb = this._fulfilledQueues.shift()){
          cb(value)
        }
      }
      // 失败队列
      const runRejected = error => {
        let cb
        while(cb = this._rejectedQueues.shift()){
          cb(error)
        }
      }
      // 如果 resolve 的是一个 promise
      if(val instanceof MyPromise){
        val.then(value => {
          this._value = value
          runFulFilled(value)
        },err => {
          this._value = err
          runRejected(err)
        })
      }else{
        this._value = val
        runFulFilled(val)
      }
    }
    setTimeout(run, 0)
  }

  _reject(err){
    if(this._status !== PENDING) return
    const run = () => {
      this._status = REJECTED
      this._value = err
      let cb
      while(cb = this._rejectedQueues.shift()){
        cb(err)
      }
    }
    setTimeout(() => run(), 0)
  }

  // 抓住的是 之前-现在-未来
  then(onFulfilled, onRejected){
    const { _value, _status } = this
    // 再返回一个 promise 对象,以支持链式调用
    return new MyPromise((onFulfilledNext, onRejectedNext) => {
      // 封装成功执行的函数
      let fulfilled = value => {
        try {
          // 如果不是函数的话,忽略并改变状态,返回上一个promise值
          if(!isFunction(onFulfilled)){
            onFulfilledNext(value)
          }else{
            let res = onFulfilled(value)
            if(res instanceof MyPromise){
              // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
              res.then(onFulfilledNext, onRejectedNext)
            }else{
              onFulfilledNext(res)
            }
          }
        } catch (error) {
          onRejectedNext(error)
        }
      }
      // 封装失败执行的函数
      let rejected = error => {
        try {
          // 如果不是函数的话,忽略并改变状态,返回上一个promise值
          if(!isFunction(onRejected)){
            onRejectedNext(error)
          }else{
            let res = onRejected(error)
            if(res instanceof MyPromise){
              // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
              res.then(onFulfilledNext, onRejectedNext)
            }else{
              onFulfilledNext(res)
            }
          }
        } catch (error) {
          onRejectedNext(error)
        }
      }
      switch(_status){
        case PENDING:
          this._fulfilledQueues.push(fulfilled)
          this._rejectedQueues.push(rejected)
          break
        case FULFILLED:
          fulfilled(_value)
          break
        case REJECTED:
          rejected(_value)
          break
      }
    })
  }

  catch(onRejected){
    return this.then(undefined, onRejected)
  }

  static resolve(value){
    if(value instanceof MyPromise) return value
    return new MyPromise(resolve => resolve(value))
  }

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

  static all(list){
    return new MyPromise((resolve, reject) => {
      let values = []
      let count = 0
      for(let [i, p] of list.entries()){
        this.resolve(p).then(res => {
          values[i] = res
          count++
          if(count === list.length) resolve(values)
        },err => {
          reject(err)
        })
      }
    })
  }

  static race(list){
    return new MyPromise((resolve, reject) => {
      for(let p of list){
        this.resolve(p).then(res => {
          resolve(res)
        },err => {
          reject(err)
        })
      }
    })
  }

  finally(cb){
    return this.then(
      value => MyPromise.resolve(cb()).then(() => value),
      reason => MyPromise.resolve(cb()).then(() => {throw reason})
    )
  }
}

cbbfcd avatar Sep 02 '18 10:09 cbbfcd