学习JavaScript循环下的async/await

Ilikewhite 发布于2019-08-23 15:14 / 1272人阅读

摘要：原因是的循环方法等是并行迭代，可以理解为的效果是无效的解决方案使用最原始的循环将上述的模拟异步任务修改为或参考连接用来处理异步在不起作用解决异步循环的使用方法

问题描述

在进行业务开发的过程中，使用了数组的高级函数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 的使用方法

专线服务服务器托管 async await javascript循环嵌套循环javascript javascript for循环

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101741.html

理清浏览器下的事件循环机制（Event Loop）

摘要：何为事件循环机制的任务分两种，分别是同步任务和异步任务。如上图所示主线程在执行代码的时候，遇到异步任务进入并注册回调函数，有了运行结果后将它添加到事件队列中，然后继续执行下面的代码，直到同步代码执行完。我们知道，JavaScript作为浏览器的脚本语言，起初是为了与用户交互和操作DOM，为了避免因为同时操作了同一DOM节点而引起冲突，被设计成为一种单线程语言。而单线程语言最大的特性就...

nemo 2019-08-23 15:40 评论0 收藏0
重学前端学习笔记（十七）--Promise里的代码为什么比setTimeout先执行？

摘要：版本以及之前，本身还没有异步执行代码的能力，宿主环境传递给引擎，然后按顺序执行，由宿主发起任务。采纳引擎术语，把宿主发起的任务称为宏观任务，把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的...

pinecone 2019-08-02 16:18 评论0 收藏0
重学前端学习笔记（十七）--Promise里的代码为什么比setTimeout先执行？

摘要：版本以及之前，本身还没有异步执行代码的能力，宿主环境传递给引擎，然后按顺序执行，由宿主发起任务。采纳引擎术语，把宿主发起的任务称为宏观任务，把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的...

zorpan 2019-08-26 13:47 评论0 收藏0
重学前端学习笔记（十七）--Promise里的代码为什么比setTimeout先执行？

摘要：版本以及之前，本身还没有异步执行代码的能力，宿主环境传递给引擎，然后按顺序执行，由宿主发起任务。采纳引擎术语，把宿主发起的任务称为宏观任务，把引擎发起的任务称为微观任务。基本用法示例的回调是一个异步的执行过程。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的...

xiongzenghui 2019-08-30 10:54 评论0 收藏0