关闭

await在forEach不起作用解决

时间: 2018-08-27阅读: 1102标签: js知识

一、前言

前两天在项目中用for遍历的时候遇到了一个坑,花了一天的时间解决。这里就记一下。


二、问题

首先引一个很简单题目:给一个数组,每隔1s打印出来.这里我把我一开始在项目中的代码贴出来.(当然这里完全和业务无关的)

const _ = require('lodash');

const echo = async (i) => {
    setTimeout(() => {
        console.log('i===>', i);
    }, 5000);
}

let arrs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const task = async () => {
    _.forEach(arrs, async (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: 2018-8-25
// run-end====>date: 2018-8-25
// end...
// i===> 1
// i===> 2
// i===> 3
// i===> 4
// i===> 5
// i===> 6
// i===> 7
// i===> 8
// i===> 9


上面的代码和输出已经给出了,很奇怪,这里的await并没有其效果.一开始因为是加了业务,是我的业务代码出了问题,然后我就把代码抽出来了,还是不起作用,当时我是真的对对await怀疑了。

最后还是给出问题的答案:

lodash的forEach和[].forEach不支持await,如果非要一边遍历一边执行await,可使用for-of


这里给出正确的代码:

const _ = require('lodash');

const echo = async (i) => {
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            console.log('i===>', i,new Date().toLocaleTimeString());
            resolve(i) ;
        }, 2000);
    })
}

let arrs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const task = async () => {
    // _.forEach(arrs, async (i) => {
    //    await echo(ji) ;
    // })
    // arrs.forEach(async (i )=> {
    //     await echo(i) ;
    // });
    for (const i of arrs) {
        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: 2018-8-26
i===> 1 20:51:29
i===> 2 20:51:31
i===> 3 20:51:33
i===> 4 20:51:35
i===> 5 20:51:37
i===> 6 20:51:39
i===> 7 20:51:42
i===> 8 20:51:44
i===> 9 20:51:46
i===> 10 20:51:48
run-end====>date: 2018-8-26
end...


三、总结

当解决问题的时候,有时候可以使用排除法,比方说在这个例子中,我们知道await这个机制肯定是没问题的,如果真的有问题肯定不会轮到我测出来,那么其实剩下来的问题只能是for遍历的原因了.因为我一开始是用lodash实现的,那么就可以想是不是lodash的forEach没有作(或者做了多余)await处理,此时就可以换种方式试试了,总的来说还是经验的问题吧。

来源:https://blog.csdn.net/ssbb1995/article/details/82084800

站长推荐

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

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

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

关闭

深入理解JS中引用类型和基本类型

javascript中基本类型指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置。 引用类型指那些保存在堆内存中的对象,意思是变量中保存的实际上只是一个指针,这个指针指向内存中的另一个位置,该位置保存对象。

js常见知识点整理总结

一些常用的JavaScript 知识点整理,包括:两个函数是否等价、NaN是什么?它是什么类型?如何检测一个变量是否是NaN?作用域相关问题?js小数计算不准确的bug,js算法/思路相关,js类型强制转换

javascript中的依赖注入

使用没有依赖的模块,显然这是很难实现的。即使你创建了很好的像黑盒一样的组件,但总有个将所有部分合并起来的地方。这就是依赖注入起作用的地方,当前来看,高效管理依赖的能力是迫切需要的,本文总结了原作者对这个问题的看法。

深入理解javascript中的事件循环event-loop

人们把javascript调控同步和异步任务的机制称为事件循环,首先来看事件循环机制的可视化描述,主线程运行的时候,产生堆和栈,栈中的代码调用各种外部API,异步操作执行完成后,就在消息队列中排队。

Javascript实现模仿接口的3种方式

Javascript模仿接口可以有三种方式:1.注释法,此方法属于程序文档范畴,对接口的继承实现完全依靠程序员自觉 2.检查属性法,把要实现的接口方法添加到类属性列表里,通过定义好的检测反复检查是否已经实现了那些方法 3.鸭式辨形法

Js继承实现小结:JavaScript实现继承的6种方式

JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?1、原型链继承,2、构造继承,3、实例继承,4、拷贝继承,5、组合继承,6、寄生组合继承

js中&与&&,|与||的区别

&、|、~都是位操作符,而&&、|、~|都是逻辑操作!。&&是逻辑与运算符假前真后,||是逻辑或运算符真前假后,&是按位与操作两个数值的个位分别相与,同时为1才得1,只要一个为0就为0。

原生js实现数字三位逗号,分隔。js实现支持逗号分割的货币格式表示法总汇

javascript实现数字三位逗号分隔,如把123456.78转换为123,456.78。js实现支持货币格式表示法:toLocaleString在将数字转换为字符串的同时,会使用三位分节法进行显示。slice 方法用于截取字符串中的一部分并返回该部分字符串。match方式代表正则表达式的匹配....

数字在JavaScript中是如何编译的

JavaScript中的所有数字都是浮点数。这篇博客文章解释了这些浮点数如何在64位二进制内部表示。浮点数并不一定等于小数,定点数也并不一定就是整数。所谓浮点数就是小数点在逻辑上是不固定的,而定点数只能表示小数点固定的数值

window.location.href的用法(动态输出跳转)

javascript中的location.href有很多种用法,window.location.href 语句可以实现一个框架的页面在执行服务器端代码后刷新另一个框架的页面

点击更多...

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