How to run two functions asynchronously in JavaScript using Async/Await;

Question

I am creating a simple react pharmacy application in which I'm supposed to change remove all the medicines from a certain group and then delete the group.

I have the two functions created like this.

1. changeMedicineGroupFunction

  const changeMedicineGroup = (medicineId, groupIdToChangeTo) => {
    fetch(
      `${process.env.REACT_APP_API_ROOT_URL}/changeMedicineGroup/${medicineId}/${groupIdToChangeTo}`,
      {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
      .then((res) => res.text())
      .then((response) => console.log(response));
  };

2.deleteGroupFunction.

  const deleteGroup = () => {
    fetch(`${process.env.REACT_APP_API_ROOT_URL}/deletegroup/${data.groupId}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => res.text())
      .then((response) => console.log(response));
  };

then a final function is used to invoke the two functions above as follows

  const removeMedicinesFromGroup = async () => {
    let unSetGroupId = 24;
    groupMedicines.forEach((medicine) =>
      changeMedicineGroup(medicine.medicineId, unSetGroupId)
    );
    deleteGroup();
  };

QUESTION How do I make my removeMedicinesFromGroup() function asynchronous in such a way that the deleteGroup() function is only invoked when the code above it is complete i.e the changing medicine Group logic. I want to use async-await. This is crucial for my application because if I delete a group while it still has data I have like whole foreign key constraint errors I'm trying to avoid.

Please Help.

a) to use async/await, your changeMedicineGroup and deleteGroup functions must return the promises b) when using async/await, you cannot use .forEach() for looping — Bergi
– Bergi, Commented Jun 30, 2022 at 19:19

ZomitaKa · Accepted Answer · 2022-07-01 07:40:56Z

2

In order to achieve that ,you have to some changes in your code. Starting with changeMedicineGroupFunction and deleteGroup that both should return a promise in order to await it in another function in your case removeMedicinesFromGroup.

Example of changeMedicineGroupFunction:

const changeMedicineGroup = (medicineId, groupIdToChangeTo) => {
    return fetch(
      `${process.env.REACT_APP_API_ROOT_URL}/changeMedicineGroup/${medicineId}/${groupIdToChangeTo}`,
      {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
    .then((res) => res.text())

  };

then in removeMedicinesFromGroup :

const removeMedicinesFromGroup = async () => {
    let unSetGroupId = 24;
    for(const medicin of groupMedicines){
     await changeMedicineGroup(medicine.medicineId, unSetGroupId)
    }
    await deleteGroup();
// you can use await here or let deleteGroup as it is without the behaviour you want will be achieved.
  };

And i used regular for Loop instead of forEach to use await in it. I found this now that has many answers about using async/await in for loop whether sequence or parallel. Using async/await with a forEach loop.

I hope it works for you.

edited Jul 1, 2022 at 7:40

answered Jun 30, 2022 at 19:28

ZomitaKa

5454 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bergi Over a year ago

You accidentally removed the res.text() from changeMedicineGroup, otherwise this is a good answer

Amos Machora Over a year ago

Thanks @Zomitaka so what you are saying is that my function that i need to wait for must return a promise>

ZomitaKa Over a year ago

Exactly @AmohPrince and don't forget the other changes in removeMedicinesFromGroup. Yes @Bergi that's right i'll add it thank you.

jka · Accepted Answer · 2022-06-30 19:24:21Z

0

You can invoke deleteGroup() after the code above it has completed by preceding the code above with await keyword.

For example:

await doSomethingBefore();
await alsoDoThisBefore();
// deleteGroup() is only invoked after the two awaited calls have completed
deleteGroup();

answered Jun 30, 2022 at 19:24

jka

4771 gold badge7 silver badges17 bronze badges

2 Comments

Bergi Over a year ago

Why are you not waiting for deleteGroup() itself?

jka Over a year ago

Because the question was only about invoking it after something has happened. Obviously the same applies regardless of function name.

Vikash Kumar · Accepted Answer · 2022-06-30 19:32:16Z

0

changeMedicineGroup should return a promise for each medicine and use Promise.all() to check if all the required groups have been changed or not and post that remove the group. In case if any of those fails the group won't be deleted .

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

answered Jun 30, 2022 at 19:32

Vikash Kumar

1,7161 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to run two functions asynchronously in JavaScript using Async/Await;

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related