Promise 解析

链接

Promise 构造函数接受一个function

Promise.resolve Promise.reject Promise.all Promise.race 静态方法

  • 1. Promise接受一个函数handle作为参数,handle包括resolve和reject两个是函数的参数
  • 2.Promise 相当于一个状态机,有三种状态:pending,fulfilled,reject,初始状态为 pending
  • 3.调用 resolve,状态由pending => fulfilled
  • 4.调用reject,会由pending => rejected
  • 5.改变之后不会变化

then 方法

  • 1.接受两个参数,onFulfilled和onRejected可选的函数
  • 2.不是函数必须被忽略
  • 3.onFullfilled: A.当 promise 状态变为成功时必须被调用,其第一个参数为 promise 成功状态传入的值( resolve 执行时传入的值); B.在 promise 状态改变前其不可被调用 C.其调用次数不可超过一次
  • 4.onRejected:作用和onFullfilled类似,只不过是promise失败调用
  • 5.then方法可以链式调用 A.每次返回一个新的Promise B.执行规则和错误捕获:then的返回值如果是非Promise直接作为下一个新Promise参数,如果是Promise会等Promise执行

Primse Class

class MyPromise {
  constructor (handle) {
    // 判断handle函数与否
    if (typeof handle!=='function') {
      throw new Error('MyPromise must accept a function as a parameter')
    }

    // 添加状态
    this._status = 'PENDING'
    // 添加状态
    this._value = undefined

    // 执行handle
    try {
      handle(this._resolve.bind(this), this._reject.bind(this)) 
    } catch (err) {
      this._reject(err)
    }
  }

  // 添加resovle时执行的函数
  _resolve (val) {
    if (this._status !== 'PENDING') return
    // this._status = 'FULFILLED'
    // this._value = val
    const run = () => {
      this._status = FULFILLED
      this._value = val
      let cb;
      while (cb = this._fulfilledQueues.shift()) {
        cb(val)
      }
    }
    // 为了支持同步的Promise,这里采用异步调用
    setTimeout(() => run(), 0)
  }

  // 添加reject时执行的函数
  _reject (err) { 
    if (this._status !== 'PENDING') return
    this._status = 'REJECTED'
    this._value = err
  }
}

_fulfilledQueues = []
_rejectedQueues = []
// 添加then方法
then (onFulfilled, onRejected) {
  const { _value, _status } = this
  // 返回一个新的Promise对象
  return new MyPromise((onFulfilledNext, onRejectedNext) => {
    // 封装一个成功时执行的函数
    let fulfilled = value => {
      try {
        if (typeof onFulfilled!=='function') {
          onFulfilledNext(value)
        } else {
          let res =  onFulfilled(value);
          if (res instanceof MyPromise) {
            // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
            res.then(onFulfilledNext, onRejectedNext)
          } else {
            //否则会将返回结果直接作为参数,传入下一个then的回调函数,并立即执行下一个then的回调函数
            onFulfilledNext(res)
          }
        }
      } catch (err) {
        // 如果函数执行出错,新的Promise对象的状态为失败
        onRejectedNext(err)
      }
    }
    // 封装一个失败时执行的函数
    let rejected = error => {
      try {
        if (typeof onRejected!=='function') {
          onRejectedNext(error)
        } else {
            let res = onRejected(error);
            if (res instanceof MyPromise) {
              // 如果当前回调函数返回MyPromise对象,必须等待其状态改变后在执行下一个回调
              res.then(onFulfilledNext, onRejectedNext)
            } else {
              //否则会将返回结果直接作为参数,传入下一个then的回调函数,并立即执行下一个then的回调函数
              onFulfilledNext(res)
            }
        }
      } catch (err) {
        // 如果函数执行出错,新的Promise对象的状态为失败
        onRejectedNext(err)
      }
    }
    switch (_status) {
      // 当状态为pending时,将then方法回调函数加入执行队列等待执行
      case 'PENDING':
        this._fulfilledQueues.push(fulfilled)
        this._rejectedQueues.push(rejected)
        break
      // 当状态已经改变时,立即执行对应的回调函数
      case 'FULFILLED':
        fulfilled(_value)
        break
      case 'REJECTED':
        rejected(_value)
        break
    }
  })
}

Leave a Reply

Your email address will not be published. Required fields are marked *