如何在for循环方法中使用异步后才继续往下执行

问题描述

在做一个业务需求的时候，遇到过需要在一个for循环里面异步调用接口，执行for循环后才继续执行之后的代码。因为平常有用到async/await和ES6的forEach，二话不说就一顿劈里啪啦的操作，大概代码如下：

function demo() {
  const arr = [1,2,3];
  const result = [];
  arr.forEach(async (item) => {
    const data = await getData(item);  // 这边是一个异步接口，返回一个promise
    result.push(data);
  })
  return result;
}

通过断点，结果都是先执行return result了，再去执行异步操作

原因

通过查看forEach源码，发现forEach里面while循环下每次都会调用回调函数(callback)，这部分就不细说了，有兴趣的可以去看下源码。

解决办法

forEach改成for,并使用Promise.all，代码如下:

async function demo() {
  const arr = [1,2,3];
  const result = [];
  for(let i = 0; i < arr.length; i++) {
    const data = getData(item);
    result.push(data); // 直接存储promise
  }
  result  = await Promise.all(result);
  return result;
}