动手写一个Promise

2019-07-13

缘始

上次写那么一个小东西嘛, 平时es6用的真的超级爽, 特别是promise这些, 然后webpack打包一看, mmpIE浏览器全线奔溃, 其他语法还好辣, 我已经引入了babel-transform, 调试找了下问题, 原来是promise这个东西ie直接奔溃了, 当然我也知道那个啥@babel/polyfill, 但是这个弄到项目比我项目还要大, 本来也就写一个小东西了. 所以, 那就自己来写一个promise呗.

始

promise其实也就是一个特殊的对象嘛, 只要我们理清楚它工作的原理就可以了, 我们先来看看es6中promise的结构吧,

new Promise((resolve,reject)=>{
  // 半秒后 成功
  setTimeout(resolve,500)
})
.then((res)=>{
  // 成功或做电什么
})
.catch((e)=>{
  // 失败后做一点什么
})

其实promise也就是一个传了一个函数进去的构造函数嘛, 在我们构造函数中给用户传入的函数给定两个函数, 代表成功的函数和失败的函数.
then和catch可以看作是promise对象的函数, 他们也接受一个代表回调的函数. 然后再指定的动作后做指定的事儿.
原理其实很简单, 只要理清楚思路, 代码也会很简单的, 现在我们就来用代码实现一下吧:

// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class myPromise{
  // 我们接收一个函数为参数
  constructor(Fn) {
    // 先判断是不是函数
    if (typeof Fn !== 'function')) {
      throw new Error('Promise resolver is not a function')
    }
    // 添加状态 => 默认状态为 PENDING
    this._status = PENDING
    // 内容 我们要把用户的一些参数带给then/catch中的函数, 所以我们要保存用户给与的参数
    this._value = undefined
    // 添加成功回调函数队列
    this._fulfilledQueues = []
    // 添加失败回调函数队列
    this._rejectedQueues = []
    try{
      // 这里我们异步调用传入的 fn, 并且将我们的方法传入过去
      setTimeout(Fn(this._resolve.bind(this), this._reject.bind(this)),0)
    }catch(e){
      // 用户的函数出错, 直接丢给错误处理函数
      this._reject(e)
    }
  }
}

接下来实现我们的promise下的_resolve, _reject方法, 其实也就是先判断当前promise的状态, 然后条用相应的方法

{
  ...

  _resolve(val){
    // 先判断 用户的FN是否状态
    if (this._status !== PENDING) return
    // 队列调用
    const run = () => {
      this._status = FULFILLED
      this._value = val
      let cb;
      while (cb = this._fulfilledQueues.shift()) {
        cb(val)
      }
    }
    // 为了支持同步的Promise，这里采用异步调用
    setTimeout(() => run(), 0)
  }
  _reject(e){
    if (this._status !== PENDING) return
    // 依次执行失败队列中的函数，并清空队列
    const run = () => {
      this._status = REJECTED
      this._value = e
      let cb;
      while (cb = this._rejectedQueues.shift()) {
        cb(e)
      }
    }
    // 为了支持同步的Promise，这里采用异步调用
    setTimeout(run, 0)
  }
}

最后就是构造我们promise中的then, catch函数了

{
  ...
  // 都是接受一个函数为参数
  then(Fn){
    const { _value, _status } = this
    switch (_status) {
      // 当状态为pending时，将then方法回调函数加入执行队列等待执行
      case PENDING:
        this._fulfilledQueues.push(Fn)
        break
      // 当状态已经改变时，立即执行对应的回调函数
      case FULFILLED:
        Fn(_value)
        break
      case REJECTED:
        this._reject(_value)
        break
    }
    // 返回一个新的Promise对象
    return this
  }
  // 都是接受一个函数为参数
  catch(Fn){
    const { _value, _status } = this
    switch (_status) {
      // 当状态为pending时，将then方法回调函数加入执行队列等待执行
      case PENDING:
        this._rejectedQueues.push(Fn)
        break
      // 当状态已经改变时，立即执行对应的回调函数
      case FULFILLED:
        this._resolve(_value)
        break
      case REJECTED:
        Fn(_value)
        break
    }
    // 返回一个新的Promise对象
    return this
  }
}

煙滅

在这里我们就已经构造好了一个简易的myPromise, 虽然还十分的简陋, 但是也足够我那个小Item使用了.
最后我们在来看看完整代码

// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class myPromise{
  // 我们接收一个函数为参数
  constructor(Fn) {
    // 先判断是不是函数
    if (typeof Fn !== 'function')) {
      throw new Error('Promise resolver is not a function')
    }
    // 添加状态 => 默认状态为 PENDING
    this._status = PENDING
    // 内容 我们要把用户的一些参数带给then/catch中的函数, 所以我们要保存用户给与的参数
    this._value = undefined
    // 添加成功回调函数队列
    this._fulfilledQueues = []
    // 添加失败回调函数队列
    this._rejectedQueues = []
    try{
      // 这里我们异步调用传入的 fn, 并且将我们的方法传入过去
      setTimeout(Fn(this._resolve.bind(this), this._reject.bind(this)),0)
    }catch(e){
      // 用户的函数出错, 直接丢给错误处理函数
      this._reject(e)
    }
  }
  _resolve(val){
    // 先判断 用户的FN是否状态
    if (this._status !== PENDING) return
    // 队列调用
    const run = () => {
      this._status = FULFILLED
      this._value = val
      let cb;
      while (cb = this._fulfilledQueues.shift()) {
        cb(val)
      }
    }
    // 为了支持同步的Promise，这里采用异步调用
    setTimeout(() => run(), 0)
  }
  _reject(e){
    if (this._status !== PENDING) return
    // 依次执行失败队列中的函数，并清空队列
    const run = () => {
      this._status = REJECTED
      this._value = e
      let cb;
      while (cb = this._rejectedQueues.shift()) {
        cb(e)
      }
    }
    // 为了支持同步的Promise，这里采用异步调用
    setTimeout(run, 0)
  }
   // 都是接受一个函数为参数
  then(Fn){
    const { _value, _status } = this
    switch (_status) {
      // 当状态为pending时，将then方法回调函数加入执行队列等待执行
      case PENDING:
        this._fulfilledQueues.push(Fn)
        break
      // 当状态已经改变时，立即执行对应的回调函数
      case FULFILLED:
        Fn(_value)
        break
      case REJECTED:
        this._reject(_value)
        break
    }
    // 返回一个新的Promise对象
    return this
  }
  // 都是接受一个函数为参数
  catch(Fn){
    const { _value, _status } = this
    switch (_status) {
      // 当状态为pending时，将then方法回调函数加入执行队列等待执行
      case PENDING:
        this._rejectedQueues.push(Fn)
        break
      // 当状态已经改变时，立即执行对应的回调函数
      case FULFILLED:
        this._resolve(_value)
        break
      case REJECTED:
        Fn(_value)
        break
    }
    // 返回一个新的Promise对象
    return this
  }
}

// 这里我们不需要做什么export这些, 只需要判断一下window下有没有Promise这个方法, 没有就把我们的myPromise赋值过去
((w)=>{
  w.Promise || (w.Promise = myPromise)
})(window)