Execute promises after each other or apply timeouts to promise

September 21, 2022

I have a function in React app where will be made three different http calls:

const handleEditUser = async () => {
  let p1, p2, p3;

  p1 = UserUtils.setProjects(user, client, newProjects);

  p2 = UserUtils.updateRights(user.id, userAuthority);

  p3 = UserUtils.updateUserClient(client, user);

  await Promise.all([p1, p2, p3]);
}

My problem is that p2 request will be executed before p1 request was completely finished.

I would like to build some timeouts or something else which allows to execute p2 after p1 is finished and p3 after p2 is finished.

I tried to replace Promise.all[] with the lines below, but it didn’t solve my problem:

await p1;
await p2;
await p3;

>Solution :

What is happening:

const handleEditUser = async () => {
  let p1, p2, p3

  p1 = UserUtils.setProjects(user, client, newProjects) // request p1 starting

  p2 = UserUtils.updateRights(user.id, userAuthority) // request p2 starting

  p3 = UserUtils.updateUserClient(client, user) // request p3 starting

  await Promise.all([p1, p2, p3]) // waiting for all of those to finish
                                  // but requests are already fired

  // or

  await p1 // waiting for p1 to finish, p2 and p3 are running in parallel
  await p2 // waiting for p2 to finish, p3 can still be running in parallel
  await p3
}

Basically, when your UserUtils methods are actually starting the workflow of the promises. So you should rather consider wait for one promise to be over before starting the next workflow:

const handleEditUser = async () => {
  await UserUtils.setProjects(user, client, newProjects)

  await UserUtils.updateRights(user.id, userAuthority)

  await UserUtils.updateUserClient(client, user)
}