CODEWITHSUNDEEP
javascriptreactjspromise
LDropl
LDropl

Reputation: 934

Execute promises after each other or apply timeouts to promise

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;

Upvotes: 1

Views: 54

Answers (2)

Ulysse BN
Ulysse BN

Reputation: 11386

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

Upvotes: 1

Jeevan Kumar
Jeevan Kumar

Reputation: 138

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

Upvotes: 4

Related Questions