极光日报
首发于极光日报

JavaScript 循环:如何处理 async/await

简评:作者提供了在 JavaScript 循环中处理 async/await 的解决方案,可以参考参考。

同步循环

很久以前我写的循环是这样的:

后来 JavaScript 提供了很多新的特性,现在我们会更倾向于用下面这种写法:

在开发过程可能会有这么一种需求,我们需要在循环中异步处理 item,那么可以怎么做呢?

异步循环

如何在循环中使用 await?我们试着写一个异步函数,然后 await 每一次循环任务。

这个代码会抛出一个错误,因为我们不能在同步方法中使用 await, processArray 确实是异步函数,但是 array.forEach 里的匿名函数是同步的。

1. 不要等待结果

要处理这个问题,我们可以把这个匿名函数定义为异步的:

但是这样的话 forEach 方法就相当于异步的了,不会等待遍历完所有的 item,例如下面这段代码:

将会输出:

Done!
1
2
3

如果你不需要等待这个循环完成,这样就已经可以了。但是大部分情况我们还是需要等待这个循环完成才进行之后的操作。

2. 串行遍历

要等待所有的结果返回,我们还是要回到老式的 for 循环写法:

最后的结果符合我们的预期:

1
2
3
Done!

上面这段的遍历代码是串行执行的,我们也可以把它换成并行的。

3. 并行遍历

我们可以稍微更改上面的代码来编程并行的:

(注意:对于特别大的数组不建议使用这种写法,太多的并行任务会加重 CPU 和内存的负荷)

原文:JavaScript loops — how to handle async/await

推荐阅读:前端开发备忘录(合集)

欢迎关注:知乎专栏「极光日报」,每天为 Makers 导读三篇优质英文文章。

发布于 2017-11-13

文章被以下专栏收录

    简介:每日导读(或翻译)三篇优质英文文章,内容 80% 涉及硅谷/编程/科技/,期待共同成长。