React中完成多个axios请求后正确执行页面重载的实现方法是什么？

问题原因 #

原有代码提前重载的核心原因是：Array.forEach 不会等待内部异步函数执行完成，你传入的每个 async (id) => {} 都是独立运行的异步任务，外层函数不会等待所有删除请求执行完成，就会直接执行后续的重载逻辑。

最优实现方案 #

批量请求场景优先选择并行请求方案，请求整体耗时最短，实现方式如下：

const handleDeletePost = async (postId) => {
  // 待删除的文章ID数组
  let postToBeDeleted = selectedPostId;
 
  if (postToBeDeleted.length > 0) {
    try {
      // 生成所有删除请求的Promise数组
      const deleteTaskList = postToBeDeleted.map(id => PostService.deletePost(id));
      // 等待所有删除请求全部执行成功
      await Promise.all(deleteTaskList);
      // 所有请求完成后再执行页面重载
      window.location.reload();
    } catch (err) {
      // 可自行添加请求失败的报错提示逻辑
      console.error('部分文章删除失败：', err);
    }
  }
};

场景适配说明 #

• 要求所有请求全部成功才重载页面：直接使用上述的Promise.all即可，任意请求失败都会进入catch逻辑，不会触发页面重载。
• 允许部分请求失败，只要所有请求执行完成就重载：将Promise.all替换为Promise.allSettled即可，该方法会等待所有Promise执行结束（无论成功失败）后才会返回。

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