在 Map 遍历中使用 async 函数

原文 https://blog.shaoyaoju.org/Javascript-async-with-map/

有时需要使用 Sleep 函数阻塞代码一段时间，该函数常规实现与调用方式如下：

// Sleep Function const sleep = async ms => new Promise(resolve => setTimeout(resolve, ms)) // Usage (async () => { await sleep(3000) }) 

但在 Array.prototype.map 中使用时，却有着错误的表现，具体如下：

// code snippet 1 [1, 2].map(async num => { console.log('Loop Start') console.log(num) await sleep(3000) console.log('Loop End') }) // expected output // Loop Start // 1 // Wait for about 3s // Loop End // Loop Start // 2 // Wait for about 3s // Loop End // Actual output // Loop Start // 1 // Loop Start // 2 // Wait for about 3s // Loop End // Loop End 

我们期望的是，在每一次循环时，暂停约 3s 钟时间后再继续执行；但实际表现是：每当执行

 await sleep(3000) 

时，没有等待结果返回便进入到了下一次循环。之所以产生错误的表现，原因是：

当 async 函数被执行时，将立即返回 pending 状态的 Promise （ Promise 是 Truthy 的）！因此，在 map 循环时，不会等待 await 操作完成，而是直接进入下一次循环，所以应当配合 for 循环使用 async。

验证一下，我们将 code snippet 1 做一下修改：

// code snippet 2 const sleep = ms => new Promise(resolve => { console.log('sleep') setTimeout(() => { console.log('resolve') resolve() }, ms) }) const mapResult = [1, 2].map(async num => { console.log('Loop Start') console.log(num) await sleep(3000) console.log('Loop End') }) console.log('mapResult', mapResult) // Actual output // Loop Start // 1 // sleep // Loop Start // 2 // sleep // mapResult [ Promise { <pending> }, Promise { <pending> } ] // resolve // Loop End // resolve // Loop End 

可以看到，使用了 async 函数后的 map 方法，其返回值为

// mapResult [ Promise { <pending> }, Promise { <pending> } ] 

即包含了多个状态为 pending 的 Promise 的数组！

另外，如果只是循环而不需要操作 map 返回的数组，那么也应当使用 for 循环。

对于 forEach 而言，参考 MDN 中它的 Polyfill 可知，若回调函数为异步操作，它将会表现出并发的情况，因为它不支持等待异步操作完成后再进入下一次循环。

感谢 @杨宁 提供的使用 Array.prototype.reduce 解决的方法：

// https://codepen.io/juzhiyuan/pen/jONwyeq const sleep = wait => new Promise(resolve => setTimeout(resolve, wait)); const __main = async function() { // 你的需求其实是在一组 task 中，循环执行，每个都 sleep，并返回结果 const tasks = [1, 2, 3]; let results = await tasks.reduce(async (previousValue, currentValue) => { // 这里是关键，需要 await 前一个 task 执行的结果 // 实际上每个 reduce 每个循环执行都相当于 new Promise // 但第二次执行可以拿到上一次执行的结果，也就是上一个 Promise // 每次执行只要 await 上一个 Promise，即可实现依次执行 let results = await previousValue console.log(`task ${currentValue} start`) await sleep(1000 * currentValue); console.log(`${currentValue}`); console.log(`task ${currentValue} end`); results.push(currentValue) return results }, []); console.log(results); } __main() // Actual output: // task 1 start // 1 // task 1 end // task 2 start // 2 // task 2 end // task 3 start // 3 // task 3 end // [1, 2, 3] 

参考

1. http://devcheater.com/
2. https://codeburst.io/Javascript-async-await-with-foreach-b6ba62bbf404
3. https://zellwk.com/blog/async-await-in-loops/

本篇文章由一文多发平台ArtiPub自动发布