面试官问：来实现一个Promise

若川视野

大家好，我是若川。最近组织了源码共读活动《1个月，200+人，一起读了4周源码》，已经有超50+人提交了笔记，群里已经有超1500人，感兴趣的可以点此链接扫码加我微信 ruochuan12 参与，一起学习，共同进步。

前言

Promise 作为异步编程的一种解决方案，在 ES6 中被标准化，提供了 Promise 对象和一系列的 API。在事件循环、链式调用、调度器实现等面试场景中均有涉及。在本文中笔者将从零实现一个符合 Promise/A+ 标准的 Promise 主体代码逻辑，并在后续系列文章中给出其他方法的实现以及常见的实际使用场景中的解法。

1、准备

本文按 Promise/A+^[1] (中文版【翻译】Promises/A+规范^[2]) 的标准实现，不熟悉的读者可以先看一遍，了解一些术语做些准备知识。

2、Promise 实现

本节，我们将进入正题，从零实现一个我们自己的 Promise。PS：在下文中，本文约定大写 Promise 指代我们实现的 MyPromise 函数对象，小写 promise 指代一个实例对象。

现在，我们实现的 MyPromise 函数第一版定义如下

function MyPromise(executor) {
  // TODO

}

2.1、状态定义

Promise 只有三种状态：pending、fulfilled 和 rejected，其中后两种是终态。

因此，我们可以先定义一个状态集合：

const PRO_STATUS = {
  PENDING: 'pending',
  FULFILLED: 'fulfilled',
  REJECTED: 'rejected'
}

2.2、状态转换及方式

promise 对象内部就像一个状态机，但是这个状态机有一点自己的限制条件，即，它的状态变换路径只有两种：

pending-》fulfilled 
或者
pending -》rejected

并且，转换之后是固定的。Ok，在谈完状态转换的路径后，我们来看一下状态转换的方式。

在初始化 promise 对象时需要向构造函数提供一个 executor 函数，该函数有两个入参（函数类型）：

•1、resolve，该函数接受一个参数，更改 promise 内部状态 pending-》fullfilled•2、reject，该函数接受一个 Error 类型参数，更改 promise 内部状态 pending -》rejected

至此，总结一下我们的 MyPromise 里应该有几个东西：

当前状态
fulfilled 状态下的 value 值
rejected 状态下的 reason 值
resolve 函数
reject 函数

那么，MyPromise 第二版现在是如下的样子：

let count = 0
function MyPromise(executor) {
  const self = this
  self.status = PRO_STATUS.PENDING
  self.count = ++count
  self.fulfilledValue = undefined
  self.rejectedReason = undefined

  try {
    executor(resolve, reject)
  } catch (error) {
    reject(error)
  }

  function resolve(rs) {
    //TODO
  }

  function reject(err){
    // TODO
  }
}

这里，我们为每个实例追加了一个 count 计数，读者可以忽略。

实例化函数后，我们直接执行了 executor 函数，并传入了两个函数类型的参数。在 executor 函数内部，用户可以通过 resolve 或者 reject 修改 promise 对象进入终态，并且只能进入一次，举个例子：

new MyPromise((resolve, reject)=>{
  //balabala...
  ....
  resolve(1) 
  reject(new Error('error'))
  resolve(2)
})

这里写了三行修改 promise 状态的代码，但是最后 promise 的状态是 fulfilled，并且 fulfilledValue 是 1。这个我们在后面 resolve 和 reject 实现中说。

2.3、then 和 catch 方法

我们知道，Promise 对象实现了链式调用来解决回调地狱的问题。类似这样：

new Promise(()=>{
  ....
})
.then(rs=>{
  ...
})
.then(rs=>{})
.catch(err=>{})

也就是说，我们可以在 then 或 catch 中拿到 promise 对象的终态数据并通过生成新的 promise 对象向下传递。

首先，我们来看看 then 方法。

then 方法接受两个函数类型的参数：onfulfilled 和 onrejected。onfulfilled 接受 promise 的 fulfilledValue 作为入参并在 promise 为 fulfilled 状态时被调用， onrejected 接受 promise 的 rejectedReason 作为入参并在 promise 为 rejected 状态时被调用。

const onfulfilled = value =>{...}
const onrejected = reason =>{...}
promiseA.then(onfulfilled, onrejected)

此外，then 方法将返回一个新的 Promise 类型对象。

相比 then方法，catch 方法仅接受一个 onrejected 函数类型的参数。和 then 方法一样将返回一个新的 Promise 类型对象。

const onrejected = reason =>{...}
promiseA.catch(onrejected)

实际上，then 和 catch 方法有几个作用：

•为 promise 对象收集 onfulfilled 和 onrejected 回调函数，在终态后（resolve 和 reject 函数触发）进行回调的调用•触发 onfulfilled 和 onrejected 回调函数

其实第一个比较好理解，第二个可以用下面一个代码去解释。

let promise = new Promise((resolve)=>{
  setTimeout(()=>{
    resolve()
    promise.then(rs=>{console.log(2)}) // then2
  })
}).then(rs=>{console.log(1)}) // then1

rs=>{console.log(1)} 回调通过 then1 收集，在 resolve 调用后被触发。此时 promise 对象进入终态， rs=>{console.log(2)} 回调通过 then2 收集并触发执行。

并且，这些回调函数只会被调用一次。

综上，我们可以总结如下：

•MyPromise 内部 resolve、reject 函数以及 then、catch 都可能会触发回调函数执行，那么他们可能在代码链路上交汇在某个执行点，也就是说他们调用了同一个处理函数，我们定义为 _handle 函数。•此外，Promise 函数内部有一个数据结构维护当前的回调函数，这里我们需要一个队列。•最后，如果我们有 promise A 对象，promise A 对象的 then 和 catch 方法都会返回一个新的 promise B 实例，A 内部状态是 fullfilled，它只调用 onfulfilled 方法。此外，promise A 进入终态才会使得 promise B 进入终态，关键点在于 A 持有 B 的 resolve、reject，A 进入终态后调用 B 的 resolve/reject，具体调用 resolve 还是 reject 以及入参要分情况区别。

Ok，有了上面的结论，我们继续修改已有代码：

const TYPES = {
  THEN: 'then',
  CATCH: 'catch',
  FINALLY: 'finally'
}
...
function MyPromise(executor) {
  const self = this
  ...
  self.cbQueue = [] // 保存回调等数据
  ...

  function resolve(rs) {
    self._handle()
  }

  function reject(err){
    self._handle()
  }
}

MyPromise.prototype._handle = function(cb){
  // TODO
}

/**
 * 
 * @param {*} onfulfilled 
 * @param {*} onrejected 
 * @returns 
 */
MyPromise.prototype.then = function(onfulfilled, onrejected) {
  return new Promise((resolve, reject) => {
    this._handle({
      type: TYPES.THEN,
      resolve,
      reject,
      onfulfilled,
      onrejected
    })
  })
}

/**
 * 
 * @param {*} onrejected 
 * @returns 
 */
MyPromise.prototype.catch = function(onrejected) {
  return new Promise((resolve, reject) => {
    this._handle({
      type: TYPES.CATCH,
      resolve,
      reject,
      onrejected
    })
  })
}

上面的代码里，我们还定义了一个 TYPES 来指定回调函数是通过 then、catch还是 finally 方法收集的，以此来辅助我们在 _handle 函数中的处理。

现在关键来到了 _handle 函数。我们根据 Promise/A+ 的标准和实际代码使用中，对于细节进行了归结。

•1、A.resolve() 情况下，B 不管是通过 then 还是 catch 产生，都要调用 B.resolve()，入参要看是否提供了 onfulfilled，具体如下：

1）如果 B 是 A.then 生成，则 B.resolve(onfulfilled(A.fulfilledValue))

2）如果 B 是 A.catch 生成，则 B.resolve(A.fulfilledValue)，不会调用 A.catch 提供的 onrejected 方法如果不提供 onfulfilled 则 B.resolve(A.fulfilledValue)

•2、注意，A.reject() 的情况下，如果有 onrejected 函数处理则状态发生转换，并且入参要看是否提供了 onrejected 函数进行包装，具体如下：

1）A 调用 reject，B 是 A.then 生成，则 B.reject(A.rejectedReason) 或者 B.resolve(onrejected(A.rejectedReason))

2）A 调用 reject，B 是 A.catch 生成，则 B.resolve(onrejected(A.rejectedReason)) 如果不提供 onrejected 则 B.reject(A.rejectedReason)

• 3、如果 A.fulfilledValue 是一个 Promise 类型，则要把 A.then() 这些收集到的回调给 A.fulfilledValue

针对 3，可以看如下示例代码：

function delay(){
  new Promise((resolve, reject)=>{// promise 0
    // console.log('0')
    // resolve('resolve')
    reject(new Error('reject'))
  })
  .then(rs=>{
    return new Promise(resolve=>{
      setTimeout(()=>{
        console.log('1')
        resolve('inner rs')
      }, 2000)
    })
  })
  .catch(err=>{ // promise 1
    return new Promise(resolve=>{ // promise 2
        setTimeout(()=>{
          console.log('1')
          resolve('inner err')
        }, 2000)
      })
  })
  .then(rs=>{
    console.log('2')
    return 'then2'
  })
}
最后打印：
（注：先延迟2s）
1 
2

最后的 then 会被 promise1 收集到，因为 promise1 的 fulfilledValue 是一个 Promise 类型对象，即 promise2。要实现延迟 2s 打印 1 后再打印 2，需要把 promise1 收集到的回调赋给 promise2。

Ok，了解了处理逻辑，我们就可以直接上代码了。

MyPromise.prototype._handle = function(cb){
  if(cb) {
    // then、catch、finally 方法处理
    this.cbQueue.push(cb)
  }else{
    // resolve、reject 处理
  }
  if(this.status === PRO_STATUS.PENDING){
    // nothing to do
  } else {
    for (let i = 0; i < this.cbQueue.length; i++) {
      const cb = this.cbQueue[i];
      const { type, resolve, reject, onfulfilled, onrejected, onfinally } = cb
      // finally
      if(type === TYPES.FINALLY){
        onfinally()
        resolve()
        continue
      }
      if(this.status === PRO_STATUS.FULFILLED){
        //
        if(typeof resolve === 'function'){
          let fulfilledValue = this.fulfilledValue
          let ans = fulfilledValue
          if(fulfilledValue instanceof MyPromise){
            // 收集的回调赋给 fulfilledValue
            fulfilledValue.cbQueue = this.cbQueue
            this.cbQueue = []
            continue
          }

          if(typeof onfulfilled === 'function'){
            // 这里要处理一下数据

            ans = onfulfilled(fulfilledValue)

            if(ans instanceof MyPromise && ans.status !== PRO_STATUS.PENDING){
              if(ans.status === PRO_STATUS.FULFILLED){
                resolve(ans.fulfilledValue)
              }else{
                reject(ans.rejectedReason)
              }
            }else{
              resolve(ans)
            }
          }else{
            resolve(ans)
          }
        }
      }else{
        if(typeof resolve === 'function'){
          let ans = this.fulfilledValue
          if(typeof onrejected === 'function'){
            /**
             * 这个地方要注意下，上面 setTimeout模拟异步的地方，修改状态的部分要放在 setTimeout 外面。
             * 否则到这里， status 还是 pending
             */
            ans = onrejected(this.rejectedReason)
            if(ans instanceof MyPromise && ans.status !== PRO_STATUS.PENDING){
              if(ans.status === PRO_STATUS.FULFILLED){
                resolve(ans.fulfilledValue)
              }else{
                reject(ans.rejectedReason)
              }
            }else{
              resolve(ans)
            }
          }else{
            reject(this.rejectedReason)
          }
        }
      }
    // })
    }
    this.cbQueue = []
  }
}

_handle 函数先对进来的参数进行判断，有的话就入队列。然后看当前的状态，是终态就处理上面的逻辑，最终清空队列。否则就直接退出。PS：这里缺少了 finally 方法的处理代码，我们在后面补上。此外还有就是关于异常的抛出问题，当 promise A 对象进入 rejected 状态，此时，如果 promise.then 未提供 onrejected，则会抛出 error; 如果提供 onrejected，则不会，也就是有的资料中提到的 error 被“吃掉”了，这部分功能并未实现。

2.4、resolve 和 reject 实现

好了，到了这里基本上完成了大部分的工作了，但是还缺少了 resolve 和 reject 部分的代码实现。无论是 resolve 还是 reject 函数，他们的功能都是两个部分：

•修改状态•触发 onfulfilled/onrejected 回调（如果有的话）

我们都知道，Promise 属于异步任务里的微任务，在构造函数里的代码和 onfulfilled/onrejected 里的代码都运行在主线程中。因此，我们需要模拟一个异步的过程，并且在定义多个 Promise 对象实例时保证一个时序，这里我们用 setTimeout，并在 setTimeout 中调用 _handle 函数。好的，我们来看 resolve 函数的具体实现。

function resolve(rs) {
  if(self.status === PRO_STATUS.PENDING) {
    /**
     * 在主线程修改状态
     */
    self.status = PRO_STATUS.FULFILLED
    self.fulfilledValue = rs
    setTimeout(() => { 
      /**
       * 模拟异步，但是这里有一个bug，setTimeout 并不准确，
       * 在 Promise.race 中有问题，主要是 setTimeout 执行间隔
       */
      self._handle()
    })
  }
}

可以看到，首先判断了当前状态，确保只能第一个 resolve/reject 方法里面的代码被执行去把 pending 状态修改为终态，并且是在主线程中修改了状态。另外注释里标明了一个问题，我们使用了 setTimeout 去模拟异步，但是因为它本身延迟执行的特性，会带来一些问题，比如下面的测试代码：

const Promise = MyPromise
function race(){
  Promise.race([
    new Promise(resolve=>{
      setTimeout(()=>{resolve(1)}, 200)// 这里有一个bug？超时改成20看看
    }),
    new Promise((resolve, reject)=>{
      setTimeout(()=>{
        // resolve(2)
        reject(new Error('timeout'))
      }, 10)
    })
  ])
  .then(res=>{
    log2('race res', {res})
  },
  err=>{
    log2('race err', {err})
  }
  )
}

在注释处修改为 20 会产生意外的效果。比照 resolve 函数的实现，我们可以很容易给出 reject 函数的代码实现：

function reject(err){
  if(self.status === PRO_STATUS.PENDING) {
    self.status = PRO_STATUS.REJECTED
    self.rejectedReason = err
    setTimeout(() => {
      self._handle()
    })
  }
}

3、结语

通过本文的介绍，我们得到了一个 Promise 实现。下一节中，我们介绍一些 API 的实现。

References

[1] Promise/A+: https://promisesaplus.com/
[2] 【翻译】Promises/A+规范: https://www.ituring.com.cn/article/66566

最近组建了一个江西人的前端交流群，如果你是江西人可以加我微信 ruochuan12 私信江西拉你进群。