Execute promises after each other or apply timeouts to promise-CodePudding

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;

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

To get the promises to run after each other, you can wait for the first one to finish executing before starting the second one and the second one before the third one

Solution 1 - Using Promise Chaining

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

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

      // execute the first promise
      p1
        .then((data, error) => {
          if (error) {
            // There was an error while executing p1
            console.error(error)
          }
          
          // use data here if you are expecting data from p1
          
          // return the second promise here 
          p2 = UserUtils.updateRights(user.id, userAuthority);
          return p2;
        })
        .then((data, error) => {
           if (error) {
            // There was an error while executing p2
            console.error(error)
          }
          
          // use data here if you are expecting data from p2
          
          // return the second promise here
          p3 = UserUtils.updateUserClient(client, user); 
          return p3;
        })
        .then((data, error) => {
           if (error) {
            // There was an error while executing p3
            console.error(error)
          }
          
          // use data here if you are expecting data from p3
        })
    }