React useEffect内.map循环中的axios请求如何正确await等待

Array.map 不会等待回调内的异步操作执行完成，只要回调返回Promise，map会直接把所有Promise对象组装成新数组返回，不会自动等待resolve，所以直接拿map的结果会得到全是Promise的数组，后续逻辑也不会等接口响应就提前执行。

首先遵循两个规则：

• 不要直接给useEffect传入async回调，React不支持effect函数返回Promise，会抛出警告，正确做法是在effect内部定义async函数再调用。
• 用Promise.all()包裹map返回的Promise数组，它会等待所有接口请求全部完成后，按原遍历顺序返回所有结果的数组，之后再执行后续逻辑即可。

同时修正原代码里的两处语法错误：else关键字后不能直接跟条件判断，要改成else if；React的状态更新函数需要调用执行，不能直接给setData赋值。

修正后的完整代码：

const getData = async (id) => {
  const myData = await api.get(
    `/api/request/${id}` // 原代码硬编码了id路径，这里修正为动态传入参数
  );
  return myData.data.data;
};

useEffect(() => {
  // 内部定义异步执行函数
  const runFetchLogic = async () => {
    // 等待所有接口请求完成，拿到按原顺序排列的结果数组
    const myData = await Promise.all(
      sampleData.map(item => getData(item.id))
    );

    // 所有请求完成后，再执行后续同步逻辑
    const myThings = myItem.things.map((thing) => {
      if (thing.type === 'sampleType1') {
        return [thing.name, thing.value];
      } else if (thing.type === 'sampleType2') {
        return [thing.name, thing.content.name];
      }
      // 补全其他分支返回，避免数组出现undefined项
      return null;
    });

    // 正确调用状态更新方法
    setData({ myThings, myData });
  };

  runFetchLogic();
}, []);

• 如果需要避免单个接口失败导致整个Promise.all报错中断，可以给每个getData调用加catch兜底，或者改用Promise.allSettled，拿到每个请求的成功/失败状态再做处理。
• 如果不需要严格保持请求结果的顺序，也可以根据业务场景增加并发控制逻辑，避免一次性发太多请求导致接口限频。

内容的提问来源于stack exchange，提问作者Dylan L.