关闭

JavaScript循环下的async/await

时间: 2019-02-17阅读: 678标签: 循环

问题描述

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2047

关闭

vue beforeEach 死循环问题解决方法

什么是beforeEach?beforeEach 是一个vue-router的路由导航钩子,一般我用它做路由守卫。什么是路由守卫?举个例子,当我们没有登录的时候,跳转到登录页面。如果登录了,则正常跳转。

forEach循环中你不知道的3件事

你觉得你真的学会用forEach了么?这是我之前对forEach循环的理解:就是一个普通语义化之后的for循环,可以被break,continue,return。这篇文章将向你展示forEach中你可能不了解的3件事。

vue 全局前置守卫引起死循环的原因与解决方法

我们经常会用到全局前置守卫,如判断用户有没有登陆过,如果登陆过就直接跳到目的页面,如果没有登陆过,就跳转到登陆页。先看官网对全局前置守卫的介绍

跳出 forEach

使用for...in遍历对象时,会遍历原型链上的可枚举属性,这可能会导致一些意想不到的问题。所以你一定收到过这样的建议,使用数组的forEach来代替for...in循环。本文给大家总结了5种在forEach中跳出循环的变通之法

为啥要放弃for循环?

创建一个新的数组,新的数组中的元素是通过检查指定数组中符合条件的元素;注意:1. filter()不会对空数组进行检测;2. filter()不会改变源是数组;

Js中循环执行

循环:就是一遍又一遍执行相同或者相似的代码,循环的两个要素:循环体:重复执行的代码;循环条件:控制循环的次数

解决使用Vue-Router出现无限循环问题

我在项目里面用到了的是全局守卫,beforeEach,方便管理 不过遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题 当时的代码如下:

用于JavaScript中的循环和同时循环

如果您需要重复大量的代码数百次,这会变得非常笨拙。而且,它也不是很有用。例如,如果希望它重复X次呢?这就是循环的用武之地。次数通常由变量决定,但也可以由实际数字决定。

for...of 循环在 JS 是不可或缺

请教大家一个问题:什么特性让该编程语言更加优秀?个人见解:当该特性可以组合多个其他语言特性时。JavaScript 中的for...of语句就是这种情况,可从ES2015开始使用。

js,jquery中.each()方法遍历循环如何终止方法

用.each()方法遍历节点的时候,用“return false”只能终止循环并继续执行循环之后的语句。代码如下:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!