学习JavaScript循环下的async/await

栏目: JavaScript · 发布时间: 5年前

内容简介:在进行业务开发的过程中,使用了数组的高级函数从上面的例子可以看出,在将上述的模拟异步任务修改为

问题描述

在进行业务开发的过程中,使用了数组的高级函数 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)
 }
参考连接

以上所述就是小编给大家介绍的《学习JavaScript循环下的async/await》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新内容创业:我这样打造爆款IP

新内容创业:我这样打造爆款IP

南立新、曲琳 / 机械工业出版社 / 2016-5-10 / 39.00

这是个内容创业爆棚的时代,在采访几十家内容创业公司,与一线最优秀的创业者独家对话之后,作者写作了这本书,其中包括对这个行业的真诚感触,以及希望沉淀下来的体系化思考。 本书共分三个部分讲述了爆红大号的内容创业模式和方法。其中第一部分,讲述了新的生产方式,即内容形态发展的现状--正在被塑造;第二部分,讲述了新的盈利探索,即从贩卖产品到贩卖内容的转变,该部分以多个案例进行佐证,内容翔实;第三部分,......一起来看看 《新内容创业:我这样打造爆款IP》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试