React中HTTP请求Promise串行执行问题：如何实现顺序执行或添加超时

你的代码核心问题出在异步请求的发起时机：你先一次性调用了三个异步函数，直接生成了p1、p2、p3三个Promise对象——这时候三个HTTP请求已经同时发送出去了。后续的await只是等待它们完成，根本无法控制执行顺序，哪怕改成挨个await p1; await p2;，请求也早就并发发起了，自然达不到串行执行的效果。

解决方法 #

要实现严格的串行执行（p1完成后再发起p2，p2完成后再发起p3），你需要把每个异步函数的调用放到await之后，等前一个请求完全完成后，再发起下一个请求：

const handleEditUser = async () => {
  // 先执行第一个请求，等待完成
  await UserUtils.setProjects(user, client, newProjects);
  // 第一个请求完成后，执行第二个请求
  await UserUtils.updateRights(user.id, userAuthority);
  // 第二个请求完成后，执行第三个请求
  await UserUtils.updateUserClient(client, user);
}

如果需要保留每个请求的返回结果，可以这样写：

const handleEditUser = async () => {
  const projectResult = await UserUtils.setProjects(user, client, newProjects);
  const rightsResult = await UserUtils.updateRights(user.id, userAuthority);
  const clientResult = await UserUtils.updateUserClient(client, user);

  // 这里可以直接使用三个请求的返回结果
  console.log(projectResult, rightsResult, clientResult);
}

这样修改后，三个请求会严格按顺序发起，完全满足你的需求。

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