共计 1148 个字符，预计需要花费 3 分钟才能阅读完成。
问题描述
在进行业务开发的过程中，使用了数组的高级函数 map，同时使用了 ES6 语法 async/await，发现在 map 循环下执行结果是异步执行，并不符合预期
例子说明
/**
* 异步打印数据
*/
const echo = async (i) => {
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log(‘i===>’, i,new Date().toLocaleTimeString());
resolve(i) ;
}, 100);
})
}
/**
* 模拟异步任务
*/
const task = async () => {
dataArr.forEach(async( item, i) => {
await echo(i);
})
}
/**
* 启动函数入口
*/
const run = async () => {
console.log(‘run-start====>date:’, new Date().toLocaleDateString())
await task() ;
console.log(‘run-end======>date:’, new Date().toLocaleDateString())
}
/**
* 启动函数
*/
(async () => {
console.log(‘start…’)
await run();
console.log(‘end…’)
})()
// 预期效果
start…
run-start====>date: 2019-2-16
i===> 0 23:19:04
i===> 1 23:19:04
i===> 2 23:19:04
i===> 3 23:19:04
run-end======>date: 2019-2-16
end…
// 打印结果
start…
run-start====>date: 2019-2-16
run-end======>date: 2019-2-16
end…
i===> 0 23:19:04
i===> 1 23:19:04
i===> 2 23:19:04
i===> 3 23:19:04
从上面的例子可以看出，在 map 循环下使用 await 后，task 任务仍然是异步任务，并不符合预期。原因是 Array 的 map、forEach 等函数 不会等到所有的步骤都完成，它只会执行任务和执行下一步，可以理解为 async/await 的效果是无效的
解决方案
使用最原始的 for 循环
for…of
将上述的模拟异步任务修改为
for (var i = 0; i < dataArr.length; i++) {
await echo(i)
}
或
for (const i of dataArr) {
await echo(i)
}
参考连接
用 async/await 来处理异步 await 在 forEach 不起作用解决 JavaScript 异步循环 – async/await 的使用方法
