React：如果所有请求都在循环中成功，如何显示成功消息

Question

我有一系列项目。我正在遍历所有项目并发出发布请求以使用 axios 在数据库中创建记录。如果所有请求都成功，我想显示一条成功消息。不知道怎么做？

我正在考虑创建一个数组并将true 和false 推送给它。如果数组值不包含false，则所有请求都成功。

有什么建议吗？

const handleAddTaskBacklogs = () => {
  setSubmitting(true);
  openSnackbar('Adding to task backlogs...');

  try {
    selectedBacklogs.forEach(async (backlog) => {
      await createResource.mutateAsync({
        url: taskBacklogsUrls.list(),
        values: {
          task: taskId,
          backlog,
        },
      });
    });

    openSnackbar('Backlog(s) added to the task');
    refetchTaskBacklogs();
    setActiveBacklog(null);
  } catch (err) {
    console.log(err.message);
    console.log(err.response && err.response.data);
    openSnackbar('Failed to add backlog(s) to the task');
  } finally {
    setSubmitting(false);
  }
};

Answer 1

您可以将 selectedBacklogs 映射到一组 Promises 和 Promise.all 它们。

Promise.all() 方法将一个可迭代的 Promise 作为输入， 并返回一个解析为结果数组的 Promise 的输入承诺。这个返回的承诺将在所有 输入的承诺已经解决，或者如果输入可迭代包含 没有保证。它立即拒绝任何输入承诺 拒绝或不承诺抛出错误，并会用这个拒绝 第一条拒绝消息/错误。

const handleAddTaskBacklogs = async () => {
  setSubmitting(true);
  openSnackbar('Adding to task backlogs...');

  try {
    const promises = selectedBacklogs.map((backlog) => {
      return createResource.mutateAsync({
        url: taskBacklogsUrls.list(),
        values: {
          task: taskId,
          backlog,
        },
      });
    });

    const result = await Promise.all(promises);

    // all successful

    openSnackbar('Backlog(s) added to the task');
    refetchTaskBacklogs();
    setActiveBacklog(null);
  } catch (err) {
    console.log(err.message);
    console.log(err.response && err.response.data);
    openSnackbar('Failed to add backlog(s) to the task');
  } finally {
    setSubmitting(false);
  }
};

Promise.all 将在第一次拒绝时立即拒绝。如果您仍然需要处理所有异步 POST 请求，那么您可以使用Promise.allSettled。然后，您可以检查每个的 status 以查看哪些已成功完成。

const result = await Promise.allSettled(promises);
const allFulfilled = result.every(({ status }) => status === 'fulfilled');

if (allFulfilled) {
  // all successful
}