在 JS 循环中正确使用 async 与 await

记录下工作中碰到的问题

准备一个例子

假设你需要在循环中进行请求，在请求返回结果后再进行下一个循环的请求，这里我们使用 setTimeout 来模拟。

在 forEach 循环中使用 await

一开始我使用的是forEach循环

我期望打印以下内容：

"start"
"10"
"20”
"30”
"end”

但实际打印以下内容:

"start"
"end"
"10"
"20"
"30"

因为JavaScript 中的 forEach不支持 promise 感知，也不支持 async 和await，所以不能在 forEach 使用 await 。

 

在 for 循环中使用 await

我期望打印以下内容：

"start"
"10"
"20”
"30”
"end”

结果正如我所料的那样：

"start"
"10"
"20”
"30”
"end”

因吹斯汀！！！那我们再来看下其他循环的结果？

 

在 for of 循环中使用 await

结果还是如我所料的那样：

"start"
"10"
"20”
"30”
"end”

 

在 while 循环中使用 await

结果还是如我所料的那样：

"start"
"10"
"20”
"30”
"end”

 

结论

1. 如果你想连续执行await调用，请使用for循环(或任何没有回调的循环)。

2. 永远不要和forEach一起使用await，而是使用for循环(或任何没有回调的循环)。