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()`](https://stackoverflow.com/q/37576685/1048572) for looping — Bergi, Jun 30 '22 at 19:19

ZomitaKa · Accepted Answer · 2022-07-01T07:40:56.070

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.

You accidentally removed the `res.text()` from `changeMedicineGroup`, otherwise this is a good answer — Bergi, Jul 01 '22 at 02:52
Thanks @Zomitaka so what you are saying is that my function that i need to wait for must return a promise> — Amos Machora, Jul 01 '22 at 05:04
Exactly @AmohPrince and don't forget the other changes in `removeMedicinesFromGroup`. Yes @Bergi that's right i'll add it thank you. — ZomitaKa, Jul 01 '22 at 07:39

score 0 · Answer 2 · answered Jun 30 '22 at 19:24

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 '22 at 19:24

jka

337
5
15

Why are you not waiting for `deleteGroup()` itself? – Bergi Jul 01 '22 at 02:52
Because the question was only about invoking it after something has happened. Obviously the same applies regardless of function name. – jka Jul 01 '22 at 15:31

score 0 · Answer 3 · answered Jun 30 '22 at 19:32

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

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

3 Answers3