脚本宝典收集整理的这篇文章主要介绍了学习JavaScript循环下的async/await，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
问题描述
在进行业务开发的过程中，使用了数组的高级函数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后， 函数结束标志信号run-end先于异步任务数据i输出，故task任务仍然是异步执行，并不符合预期。原因是Array的循环方法map、forEach、filter、reduce、some、every等是并行迭代，可以理解为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 的使用方法
以上是脚本宝典为你收集整理的学习JavaScript循环下的async/await全部内容，希望文章能够帮你解决学习JavaScript循环下的async/await所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。