面试官问：来实现一个Promise

前言

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

1、准备

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

2、Promise 实现

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

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

2.1、状态定义

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

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

2.2、状态转换及方式

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

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

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

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

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

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

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

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

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

2.3、then 和 catch 方法

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

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

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

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

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

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

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

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

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

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，有了上面的结论，我们继续修改已有代码：

上面的代码里，我们还定义了一个 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，可以看如下示例代码：

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

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

_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 函数的具体实现。

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

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

3、结语

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

References

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

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