这篇手写 Promise 你一定要康康

最近重温了一下 Q/Promise[1] 的设计讲解，结合自己的理解和一些小优化，决定也来写一篇手写 Promise 的文章。,我们先以观察者模式作为基石来搭建一个基础版本，实现的功能如下：,代码很简单，应该不用过多解释，上面的完整代码在这里：p0.js[2]。,这个基础版本有个明显的问题：then  不能进行链式调用，接着就来优化一下。,then 的链式调用会返回一个新的 Promise，并且 then 中回调的返回值会使这个新的 Promise 决议为“成功”状态。,实现链式调用的关键是如何决议返回的新 Promise？这里我对变量做了一些有含义的命名，方便理解：,上面的完整代码在这里：p1.js[3]。,现在又有个新问题，如果 resolve 的 value 是个 Promise，或者 onfulfilled 函数返回的结果是个 Promise，那么链式传播的决议值不应该是这个 Promise 本身，而是这个 Promise 的决议值才对，也就是要支持 Promise 的状态传递。,在实现状态传递之前，我们先来康康如何确定一个值是不是 Promise。我们可以用原型继承来判断：,这样的缺点是兼容性较差，你无法强制使用者的运行环境上下文中只会用一种 Promise 的库，或者在不同的运行上下文中传递 Promise 实例。所以这里我们使用 鸭子类型[4] 来判断 Promise，重点关注对象的行为，将 Promise 看作是一个 thenable 对象。,接下来就来实现状态传递了，实现的思路就是基于鸭子类型和“通知转移”。我们先定义一个函数：,顾名思义，这个函数的作用是用来把一个值包装为 thenable 对象：如果 value 是 Promise 则直接返回；如果不是就包装并返回一个有 then 方法的对象，也就是 thenable 对象。这个 thenable 对象的作用是啥呢？接着看这里：,resolve 决议时，根据 value 的类型不同，有两种处理情况：,当然 then 也要做一点修改：,这里来总结一下状态传递的设计思路。包装为 thenable 对象非常关键，作用是保持了与 Promise 一致的行为，也就是接口一致。这样在 resolve 时我们不用特定去判断这个值是不是 Promise，而可以用统一的处理方式来通知观察者；并且也顺便完成了“通知转移”，如果 value 还没有决议，则 then 会注册为回调，如果已决议则 then 会立即执行。,上面的完整代码在这里：p2.js[5]。接下来，我们来完善一下 reject。,当 Promise 决议失败时，then 方法里面将只执行第二个参数 onRejected 对应的回调。首先我们需要另一个包装函数：,这个函数的作用是一旦发生 reject(value) 时，我们把 value 变为另一种 thenable 对象，这个对象在执行 then 时只会调用 onRejected。,然后改变一下构造函数：,现在有一个比较大的变化：this.pending 变为了二维数组。这样 this.value.then.apply 在执行时会有三种情况：,同样 then 方法也要做一些修改：,我们要特别注意一下增加了 onFulfilled、onRejected 的默认值。在实际使用 then 时，可能只会专注处理成功或者失败的回调，但是我们又需要另外一种状态要继续传播下去。这里可能有点不好理解，可以代入数据模拟一下。上面的完整代码在这里：p3.js[6]。,又到了思考总结时间，thenable 这个接口是关键所在。通过两个包装对象，分别处理成功和失败的状态，在通知观察者时可以保持统一的逻辑，这个设计是不是感觉很妙呢？,接下来我们要处理一下调用时会产生异常的问题。,我们先思考一下会有哪些地方会产生异常？第一个是构造函数里面 exector 执行的时候：,然后是onFulfilled 和 onRejected 执行的时候。当在以上两个方法里产生异常时，状态要变为失败，并且需要把异常传播下去。then 的改动如下：,然后我们可以加入 catch 方法：,上面的完整代码在这里：p4.js[7]。,到了这里，基本上 Promise 的基本功能就差不多完成了。不过还有一些不太完善的地方，我们来继续做一些优化。,this.pending 和 this.value 从外部是可以读写的，不够安全和健壮。而我又还是想用构造函数和原型方法，不想用闭包来封装。我这里采用的是 WeakMap[8] 来达到目的，关键的修改如下：,同样 then 也修改一下：,上面的完整代码在这里：p5.js[9]。,当 Promise 实例被垃圾回收时，对应在 WeakMap 中的私有数据对象引用也会被消除，没有内存泄漏问题，这种方案非常适合用来封装私有变量。,目前的 Promise 在执行时有调用顺序问题，比如：,一个简单的做法是利用 setTimeout 来改进：,enqueue 的作用是模拟按入队顺序来延迟执行函数。通过对所有 then 调用的延迟执行，可以保证按正确的注册顺序和决议顺序来执行了，上面的完整代码在这里：p6.js[10]。,到了这里我觉得就先差不多了，毕竟此文的目的是分享和交流一种 Promise 的设计思路和心得，而不是去造一个完美的 Promise。手写一个 Promise 这个结果不应该是我们的目的，观察演进过程中的思路和方案才是我们需要吸收的东西。