Execute promises after each other or apply timeouts to promise

Question

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;

[Promises are not "executed"](https://stackoverflow.com/a/49685827/1048572). When you call your three methods, you've started three asynchronous processes, `await`ing them afterwards won't change anything. You'll need to `await` the first before even *calling* the second method! — Bergi, Sep 21 '22 at 12:23

score 4 · Answer 1 · answered Sep 21 '22 at 12:21

4

There is no need for Promise.all[]

Your requirement is to execute promises one after another, then async with await will work here.

You can try this way.

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

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

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

  p3 = await UserUtils.updateUserClient(client, user);
}

Note: UserUtils methods should be a promise

answered Sep 21 '22 at 12:21

Jeevan Kumar

138
5

Minor correction: `UserUtils` methods do not need to return promises. If what is being awaited does not return a Promise, then await wraps it in a promise: https://stackoverflow.com/questions/55262996/does-awaiting-a-non-promise-have-any-detectable-effect – Terry Sep 21 '22 at 12:22
1

@Terry "should" != "must". There's no point in ever awaiting something that's not a promise (or promise-like), so Jeevan is correct, it _should_ be a promise. – Patrick Roberts Sep 21 '22 at 12:25

Ulysse BN · Accepted Answer · 2022-09-21T12:34:15.460

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)
}

Execute promises after each other or apply timeouts to promise

2 Answers2