如何判断map遍历中的所有异步axios请求执行完成？

你可以利用Promise.all()来等待所有异步请求完成，这是处理多个并行异步操作的标准方案。具体修改如下：

1. 调整answersRequest函数，收集每个axios请求的Promise并提取返回的id：

const answersRequest = async () => {
  // 生成所有请求的Promise数组，每个请求成功后返回对应的id
  const requestPromises = answers.map(answer => 
    axios({
      method: 'POST',
      url: 'http://127.0.0.1:8000/api/answers/',
      data: answer
    }).then(resp => resp.data.id)
  );

  // 等待所有请求完成，拿到所有id组成的数组
  const answersIds = await Promise.all(requestPromises);
  
  // 所有请求完成后执行函数a
  a(answersIds);
};

2. 调整函数a，让它接收id数组作为参数（避免依赖外部变量，代码更健壮）：

const a = (answersIds) => {
  setQuestionsBlok([...questionsBlok, {...questionBlokInputs, answers: answersIds}]); 
  setAnswers([]);
};

替代写法（不用async/await） #

如果你习惯用链式调用，也可以这样写：

const answersRequest = () => {
  const requestPromises = answers.map(answer => 
    axios({
      method: 'POST',
      url: 'http://127.0.0.1:8000/api/answers/',
      data: answer
    }).then(resp => resp.data.id)
  );

  Promise.all(requestPromises).then(answersIds => {
    a(answersIds);
  });
};

关键说明 #

• axios()本身会返回Promise对象，我们通过map把所有请求的Promise收集到数组中。
• Promise.all()会等待数组内所有Promise都成功完成，然后返回一个包含所有Promise结果的数组（也就是所有请求返回的id）。
• 如果需要容错（比如个别请求失败不阻断整体流程），可以改用Promise.allSettled()，之后手动过滤出成功的请求结果。

内容的提问来源于stack exchange，提问作者Vahe Hakobjanyan