谈forEach中使用async await踩坑

场景：

如果我们在程序中，需要遍历数组，针对每一项发起一个异步请求，而这些请求具有明确的先后顺序。即上一次请求完成，才能发起下一次请求，那么应该怎么实现？

一种很容易想到的方式是：使用forEach遍历，针对数组的每一项，发起一次请求。

对于forEach的回调函数，声明为异步函数（async），在里面使用await。

 let arr = [1, 2, 3, 4];
 await arr.forEach(async item => {
  const res = await fetch(item)
  // ...
 })

forEach的问题

假使我们使用forEach，那么我们会发现结果并不符合预期。我们的请求的响应并非按我们预期的顺序进行，会出现顺序错乱现象。那么原因何在？

原因是forEach遍历，仅仅是短时间内连续发起了多个请求，对于某一次请求有等待过程，但对于整体的多次请求是没有作用的。

也就是async await仅仅作用于某一次请求的处理过程中，并不作用于所有请求的先后顺序。

推荐的写法——for of

  虽然使用forEach无法得到想要的结果，但我们只需要改用for of即可。

 let arr = [1, 2, 3 ,4]
 for(let i of arr){
   const res = await fetch(arr[i]); 
   //...          
 }