React：循环发起多请求全部成功后如何展示成功提示

现有代码的问题 #

你当前的写法存在逻辑缺陷：forEach不会等待内部的异步函数执行完成，会直接跳过所有请求执行后续的成功提示，同时外层的try/catch也捕获不到异步任务抛出的错误，完全达不到你想要的效果。

推荐实现方案 #

用Promise.all就能完美满足你的需求，不需要手动维护布尔数组判断状态。Promise.all接收一个Promise数组作为参数，只有所有Promise都成功完成时才会返回成功结果，只要任意一个请求失败就会直接抛出错误进入catch分支。

修改后的代码如下：

// 首先给函数加async修饰，否则内部不能用await
const handleAddTaskBacklogs = async () => {
  setSubmitting(true);
  openSnackbar('正在添加任务待办...');

  try {
    // 将所有请求转为Promise数组
    const requestTasks = selectedBacklogs.map(backlog => 
      createResource.mutateAsync({
        url: taskBacklogsUrls.list(),
        values: {
          task: taskId,
          backlog,
        },
      })
    );
    // 等待所有请求全部成功
    await Promise.all(requestTasks);

    openSnackbar('待办添加成功');
    refetchTaskBacklogs();
    setActiveBacklog(null);
  } catch (err) {
    console.log(err.message);
    console.log(err.response?.data);
    openSnackbar('待办添加失败');
  } finally {
    setSubmitting(false);
  }
};

扩展场景说明 #

如果你后续需要支持统计成功/失败数量、定位具体哪个请求失败，即使部分失败也要执行后续逻辑，可以使用Promise.allSettled，它会等待所有请求执行完毕后返回每个请求的执行状态，你可以自行过滤判断：

const results = await Promise.allSettled(requestTasks);
const successList = results.filter(item => item.status === 'fulfilled');
const failList = results.filter(item => item.status === 'rejected');
openSnackbar(`共${successList.length}条添加成功，${failList.length}条添加失败`);

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