共计 9450 个字符,预计需要花费 24 分钟才能阅读完成。
最近重温了一下 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