DanLevy.net

可视化 Promise

冲破障碍…

Hero image for 可视化 Promise

为了直观地观察 Promise 的执行过程,我们先定义一个新方法 delay(millisecs)

function delay(millisecs) {
return new Promise(resolve => {
setTimeout(() => resolve(millisecs), millisecs);
});
}

这是一个实用函数,超时结束后会 resolve。

超时时间(毫秒)会作为参数传递给 .then 的回调。

下面通过 4 个示例(配合动画时间轴)来说明。

示例 #1/4

展示 console.log() 的执行会被 delay(msec) 推迟。

delay(1000).then(() => console.log("done"));

Timeline showing delay 1000 then console log running after one second

示例 #2/4

展示一个常见错误。

console.log 会在 delay(1000) 开始时立即执行,而不是在延迟结束后(即你期望的那样)执行。

因为 console.log 返回 undefined,我们的 .then() 实际上被静默忽略。

注意 typeof console.log === 'function'typeof console.log() === undefined 的区别。

一般情况下,console.log 的正确用法如示例 #1 所示。务必向 .then.catch 传入函数。

delay(1000).then(console.log("done"));

Timeline showing console log running immediately before the delay finishes

示例 #3/4

3 个 Promise 同时执行。

delay(1000).then(console.log);
delay(2000).then(console.log);
delay(3000).then(console.log);

展示三个延迟 Promise 在一秒、两秒和三秒后分别 resolve 的时间线

示例 #4/4

使用 Promise.all 包装 3 个 delay Promise。它们会并行执行。

Promise.all([delay(1000), delay(2000), delay(3000)]).then(console.log);

展示 Promise.all 等待所有三个 delay Promise 完成的时间线

署名: