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