可视化 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"));
示例 #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"));
示例 #3/4
3 个 Promise 同时执行。
delay(1000).then(console.log);delay(2000).then(console.log);delay(3000).then(console.log);
示例 #4/4
使用 Promise.all 包装 3 个 delay Promise。它们会并行执行。
Promise.all([delay(1000), delay(2000), delay(3000)]).then(console.log);
署名: