最近重温了一下 Q/Promise 的设计解说，联合本人的了解和一些小优化，决定也来写一篇手写 Promise 的文章。本文的内容适宜对 Promise 的应用有肯定理解的童鞋，因为过程中不会过多解释 Promise 的根底操作。咱们从一个根底版本开始，渐进式地实现这个 Promise，在过程中分享我的了解和观点。内容可能有点长，废话不多说，咱们开始吧。
根底版本
咱们先以观察者模式作为基石来搭建一个根底版本，实现的性能如下：
- 构造函数承受一个函数
exector作为参数，该函数的第一个参数是resolve，作用是把 Promise 对象的状态变为“胜利”。 - 原型办法
then是用来注册一个当状态变为胜利的回调函数，当回调触发时，参数是resolve时的决定值。
function Promise(exector) { this.pending = []; this.value = undefined; const resolve = value => { if (this.pending) { this.value = value; for (const onFulfilled of this.pending) { // 告诉观察者。 onFulfilled(this.value); } this.pending = undefined; } }; exector(resolve);}Promise.prototype.then = function (onFulfilled) { if (this.pending) { // 还没决定，先注册观察者。 this.pending.push(onFulfilled); } else { // 已决定，间接告诉。 onFulfilled(this.value); }};// 测试一下。const p = new Promise(resolve => { setTimeout(() => resolve(666), 100);})p.then(res => console.log('res: %s', res));// 输入：// res: 666代码很简略，应该不必过多解释，下面的残缺代码在这里：p0.js。
这个根底版本有个显著的问题： then 不能进行链式调用，接着就来优化一下。
then 链式调用
then 的链式调用会返回一个新的 Promise，并且 then 中回调的返回值会使这个新的 Promise 决定为“胜利”状态。
Promise.prototype.then = function (onFulfilled) { // “以后”Promise，对于返回的新 Promise 而言，也是“前一个”Promise。 const prev = this; const promise = new Promise(resolve => { // 包装 onFulfilled，使其能够“流传”决定； // “前一个” Promise 决定后，决定返回的这个新 Promise。 const onSpreadFulfilled = function (value) { resolve(onFulfilled(value)); }; if (prev.pending) { prev.pending.push(onSpreadFulfilled); } else { onSpreadFulfilled(prev.value); } }); return promise;};// 测试一下。const p = new Promise(resolve => { setTimeout(() => resolve(666), 100);});p.then(res => { console.log('res1: %s', res); return res + 1;).then(res => { console.log('res2: %s', res);); // 输入：// res1: 666// res2: 667实现链式调用的要害是如何决定返回的新 Promise？这里我对变量做了一些有含意的命名，不便了解：
prev是调用then时“以后”的 Promise，对于返回的新 Promise 而言，能够看做是“前一个”Promise。- 包装 onFulfilled——执行完以后注册的 onFulfilled 后，用其返回值来决定返回的那个新的 Promise。这是个关键步骤，为体现流传的动作，将其命名为
onSpreadFulfilled。 - 将
onSpreadFulfilled作为胜利的回调注册到prev上。
下面的残缺代码在这里：p1.js。
当初又有个新问题，如果 resolve 的 value 是个 Promise，或者 onfulfilled 函数返回的后果是个 Promise，那么链式流传的决定值不应该是这个 Promise 自身，而是这个 Promise 的决定值才对，也就是要反对 Promise 的状态传递。
状态传递
在实现状态传递之前，咱们先来康康如何确定一个值是不是 Promise。咱们能够用原型继承来判断：
return value instanceof Promise;这样的毛病是兼容性较差，你无奈强制使用者的运行环境上下文中只会用一种 Promise 的库，或者在不同的运行上下文中传递 Promise 实例。所以这里咱们应用 鸭子类型 来判断 Promise，重点关注对象的行为，将 Promise 看作是一个 thenable 对象。
function isPromise(value) { // 如果这个对象上能够调用 then 办法，就认为它是一个“Promise”了。 return value && typeof value.then === 'function';}接下来就来实现状态传递了，实现的思路就是基于鸭子类型和“告诉转移”。咱们先定义一个函数：
function wrapToThenable(value) { if (isPromise(value)) { return value; } else { return { then: function (onFulfilled) { return wrapToThenable(onFulfilled(value)); } }; }}顾名思义，这个函数的作用是用来把一个值包装为 thenable 对象：如果 value 是 Promise 则间接返回；如果不是就包装并返回一个有 then 办法的对象，也就是 thenable 对象。这个 thenable 对象的作用是啥呢？接着看这里：
function Promise(exector) { this.pending = []; this.value = undefined; const resolve = value => { if (this.pending) { // 包装为 thenable。 this.value = wrapToThenable(value); for (const onFulfilled of this.pending) { // 告诉时改为调用 thenable 上的 then。 this.value.then(onFulfilled); } this.pending = undefined; } }; exector(resolve);}resolve 决定时，依据 value 的类型不同，有两种解决状况：
- 如果
value是一般值，通过wrapToThenable会包装为thenable对象，告诉时调用then办法相当于间接调用onFulfilled。 - 如果
value是 Promise，则把onFulfilled注册到value上；等到value决定时，就会调用onFulfilled。还记得链式调用时的onSpreadFulfilled吗？ 这里就是“告诉转移”了，把告诉下一个 Promise 的责任转移到了value身上。
当然 then 也要做一点批改：
Promise.prototype.then = function (onFulfilled) { const prev = this; const promise = new Promise(resolve => { const onSpreadFulfilled = function (value) { resolve(onFulfilled(value)); }; if (prev.pending) { prev.pending.push(onSpreadFulfilled); } else { // 这里也要改为调用 then。 prev.value.then(onSpreadFulfilled); } }); return promise;};// 测试一下。const p = new Promise(resolve => { setTimeout(() => resolve(666), 100);});p.then(res => { console.log('res1: %s', res); return new Promise(resolve => { setTimeout(() => resolve(777), 100); });}).then(res => { console.log('res2: %s', res);});// 输入：// res1: 666// res2: 777这里来总结一下状态传递的设计思路。包装为 thenable 对象十分要害，作用是放弃了与 Promise 统一的行为，也就是接口统一。这样在 resolve 时咱们不必特定去判断这个值是不是 Promise，而能够用对立的解决形式来告诉观察者；并且也顺便实现了“告诉转移”，如果 value 还没有决定，则 then 会注册为回调，如果已决定则 then 会立刻执行。
下面的残缺代码在这里：p2.js。接下来，咱们来欠缺一下 reject。
失败状态
当 Promise 决定失败时，then 办法外面将只执行第二个参数 onRejected 对应的回调。首先咱们须要另一个包装函数：
function wrapToRejected(value) { return { then: function (_, onRejected) { return wrapToThenable(onRejected(value)); } };}这个函数的作用是一旦产生 reject(value) 时，咱们把 value 变为另一种 thenable 对象，这个对象在执行 then 时只会调用 onRejected。
而后扭转一下构造函数：
function Promise(exector) { // pending 变为一个二维数组，外面寄存的元素是 [onFulfilled, onRejected]。 this.pending = []; this.value = undefined; const resolve = value => { if (this.pending) { this.value = wrapToThenable(value); for (const handlers of this.pending) { this.value.then.apply(this.value, handlers); } this.pending = undefined; } }; const reject = value => { resolve(wrapToRejected(value)); }; exector(resolve, reject);}当初有一个比拟大的变动：this.pending 变为了二维数组。这样 this.value.then.apply 在执行时会有三种状况：
- this.value 是胜利决定转换来的
thenable对象，还记得wrapToThenable吗？then被执行时只会调用onFulfilled。 - this.value 是失败决定转换来的
thenable对象，then被执行时只会调用onRejected。 - this.value 是一个 Promise，决定会转移到这个 Promise 上。
同样 then 办法也要做一些批改：
Promise.prototype.then = function (onFulfilled, onRejected) { const prev = this; // 留神这里给了 onFulfilled、onRejected 默认值。 onFulfilled = onFulfilled || function (value) { return value; }; onRejected = onRejected || function (value) { return wrapToRejected(value); }; const promise = new Promise(resolve => { const onSpreadFulfilled = function (value) { resolve(onFulfilled(value)); }; const onSpreadRejected = function (value) { resolve(onRejected(value)); }; if (prev.pending) { prev.pending.push([onSpreadFulfilled, onSpreadRejected]); } else { prev.value.then(onSpreadFulfilled, onSpreadRejected); } }); return promise;};// 测试一下。const p = new Promise((resolve, reject) => { setTimeout(() => reject(666), 100);});p.then(undefined, err => { console.log('err1: %s', err); return 1;}).then(res => { console.log('res1: %s', res);});// 输入：// err1: 666// res1: 1咱们要特地留神一下减少了 onFulfilled、onRejected 的默认值。在理论应用 then 时，可能只会专一解决胜利或者失败的回调，然而咱们又须要另外一种状态要持续流传上来。这里可能有点不好了解，能够代入数据模仿一下。下面的残缺代码在这里：p3.js。
又到了思考总结工夫，thenable 这个接口是关键所在。通过两个包装对象，别离解决胜利和失败的状态，在告诉观察者时能够放弃对立的逻辑，这个设计是不是感觉很妙呢？
接下来咱们要解决一下调用时会产生异样的问题。
异样解决
咱们先思考一下会有哪些地方会产生异样？第一个是构造函数外面 exector 执行的时候：
function Promise(exector) { this.pending = []; this.value = undefined; const resolve = value => { // ... }; const reject = value => { resolve(wrapToRejected(value)); }; try { exector(resolve, reject); } catch (e) { // 如果有异样产生，状态变为“失败”。 reject(e); }}而后是onFulfilled 和 onRejected 执行的时候。当在以上两个办法里产生异样时，状态要变为失败，并且须要把异样流传上来。then 的改变如下：
Promise.prototype.then = function (onFulfilled, onRejected) { // ... // 产生异样的时候包装一下。 const errHandler = returnWhenError(err => wrapToRejected(err)); onFulfilled = errHandler(onFulfilled); onRejected = errHandler(onRejected); const promise = new Promise(resolve => { const onSpreadFulfilled = function (value) { resolve(onFulfilled(value)); }; const onSpreadRejected = function (value) { resolve(onRejected(value)); }; if (prev.pending) { prev.pending.push([onSpreadFulfilled, onSpreadRejected]); } else { prev.value.then(onSpreadFulfilled, onSpreadRejected); } }); return promise;};// 封装为一个可重用的高阶函数。// 如果 fun 执行失败了，则返回 onError 的后果。function returnWhenError(onError) { return fun => (...args) => { let result; try { result = fun(...args); } catch (e) { result = onError(e); } return result; };}而后咱们能够退出 catch 办法：
Promise.prototype.catch = function (onRejected) { // 在 then 中疏忽掉“胜利”状态的回调。 return Promise.prototype.then.call(this, undefined, onRejected);};// 测试一下。const p = new Promise(resolve => { setTimeout(() => resolve(666), 100);});p.then(res => { console.log('res1: %s', res); throw new Error('test error1');}).then(undefined, err => { console.log('err1: %s', err.message); throw new Error('test error2');}).catch(err => { console.log('err2: %s', err.message);});// 输入：// res1: 666// err1: test error1// err2: test error2下面的残缺代码在这里：p4.js。
到了这里，基本上 Promise 的基本功能就差不多实现了。不过还有一些不太欠缺的中央，咱们来持续做一些优化。
一些优化
封装公有变量
this.pending 和 this.value 从内部是能够读写的，不够平安和强壮。而我又还是想用构造函数和原型办法，不想用闭包来封装。我这里采纳的是 WeakMap 来达到目标，要害的批改如下：
const refMap = new WeakMap();// ...function Promise(exector) { // 用以后的实例援用作为 key，把想暗藏的数据放进一个对象里。 refMap.set(this, { pending: [], value: undefined }); const resolve = value => { // 取出封装的数据。 const data = refMap.get(this); if (data.pending) { data.value = wrapToThenable(value); for (const handlers of data.pending) { data.value.then.apply(data.value, handlers); } data.pending = undefined; } }; // ...}同样 then 也批改一下：
Promise.prototype.then = function (onFulfilled, onRejected) { // ... const promise = new Promise(resolve => { const onSpreadFulfilled = function (value) { resolve(onFulfilled(value)); }; const onSpreadRejected = function (value) { resolve(onRejected(value)); }; // 取出封装的数据。 const data = refMap.get(prev); if (data.pending) { data.pending.push([onSpreadFulfilled, onSpreadRejected]); } else { data.value.then(onSpreadFulfilled, onSpreadRejected); } }); return promise;};下面的残缺代码在这里：p5.js。
当 Promise 实例被垃圾回收时，对应在 WeakMap 中的公有数据对象援用也会被打消，没有内存透露问题，这种计划非常适合用来封装公有变量。
调用程序
目前的 Promise 在执行时有调用程序问题，比方：
const p = new Promise(resolve => resolve(1));p.then(res => { console.log('res1:', res); return res + 1;}).then(res => { console.log('res2:', res);});p.then(res => { console.log('res3:', res);});console.log('Hi!');// 目前的输入是：// res1: 1// res2: 2// res3: 1// Hi!// 正确的输入应该是：// Hi!// res1: 1// res3: 1// res2: 2一个简略的做法是利用 setTimeout 来改良：
function Promise(exector) { // ... const resolve = value => { const data = refMap.get(this); if (data.pending) { data.value = wrapToThenable(value); for (const handlers of data.pending) { // 提早执行。 enqueue(() => { data.value.then.apply(data.value, handlers); }); } data.pending = undefined; } }; // ...}Promise.prototype.then = function (onFulfilled, onRejected) { // ... const promise = new Promise(resolve => { // ... if (data.pending) { data.pending.push([onSpreadFulfilled, onSpreadRejected]); } else { // 提早执行。 enqueue(() => { data.value.then(onSpreadFulfilled, onSpreadRejected); }); } }); return promise;};function enqueue(callback) { setTimeout(callback, 1);}enqueue 的作用是模仿按入队程序来提早执行函数。通过对所有 then 调用的提早执行，能够保障按正确的注册程序和决定程序来执行了，下面的残缺代码在这里：p6.js。
接下来呢？
咳咳，到了这里我感觉就先差不多了，毕竟此文的目标是分享和交换一种 Promise 的设计思路和心得，而不是去造一个完满的 Promise。手写一个 Promise 这个后果不应该是咱们的目标，察看演进过程中的思路和计划才是咱们须要排汇的货色。前面有工夫我会把短少的一些接口也补上，比方 Promise.resolve、Promise.prototype.finally 等等。
最初，心愿你也能从这篇文章中播种一些货色吧，欢送 star 和关注我的 JavaScript 博客：小声比比 JavaScript