关闭

await在forEach不起作用解决

时间: 2018-08-27阅读: 1030标签: 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记录用户行为浏览记录和停留时间

原来是想使用 cookie 来记录,但是考虑到 cookie 所能记录的数据最大为 4k ,可能不够用。于是使用了 HTML5 的 localStorage (最大数据 5M )来存储( IE8 以上浏览器支持)。这里使用到了 jquery.cookie 的插件,所以页面要引入 jquery 和 jquery.cookie 。

手写JavaScript中的bind方法

bind方法返回的是一个绑定this后的函数,并且该函数并没有执行,需要手动去调用。(从这一点看bind函数就是一个高阶函数,而且和call,apply方法有区别)。bind方法可以绑定this,传递参数。注意,这个参数可以分多次传递。

为什么javascript不起作用?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

19 个 JavaScript 常用有用的简写技术

Js中有用的简写技术:1.三元操作符、2.短路求值简写方式、3.声明变量简写方法、4.if存在条件简写方法、5.JavaScript循环简写方法、6.短路评价...

js中async与defer

async 异步加载,立即下载,不应妨碍页面其他操作,标记为 async 的异步脚本并不保证按照指定的先后顺序执行,用async很容易出错,async 是无序执行,自身加载完就会执行;

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

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

10个JavaScript难点:能够读懂这篇博客的JavaScript开发者,运气不会太差…

10个JavaScript难点包括:立即执行函数,闭包,使用闭包定义私有变量,prototype,模块化,变量提升,柯里化,apply, call与bind方法,Memoization,函数重载

js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求;在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西。

js中的相等性判断

Js提供了三种不同的比较操作符===,==,Object.is。ECMAScript 提供了四种比较操作符:非严格相等(==)、严格相等(===)、零值相等、同值相等。

javascript难点是什么?

javascript难点是什么?下面本篇文章就来给大家介绍一下10个JavaScript难点,感兴趣的小伙伴们可以参考一下,希望对大家有所帮助。立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字

点击更多...

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