Async For Each ~ Synchronously Run a Promise on Each Element of an Array

Getting Started

Let’s say you have an array, and you need to run a promise on each of its element synchronously, like this

index.js

const apiList = [
  "https://pokeapi.co/api/v2/pokemon/1/",
  "https://pokeapi.co/api/v2/pokemon/2/",
  "https://pokeapi.co/api/v2/pokemon/3/",
  "https://pokeapi.co/api/v2/pokemon/4/",
  "https://pokeapi.co/api/v2/pokemon/5/",
];
apiList.forEach(endpoint => {Get pokemon from https://pokeapi.co/api/v2/pokemon/1/
Get pokemon from https://pokeapi.co/api/v2/pokemon/2/
Get pokemon from https://pokeapi.co/api/v2/pokemon/3/
Get pokemon from https://pokeapi.co/api/v2/pokemon/4/
Get pokemon from https://pokeapi.co/api/v2/pokemon/5/
Script finished...
Pokemon: ivysaur with id: 2
Pokemon: bulbasaur with id: 1
Pokemon: charmeleon with id: 5
Pokemon: venusaur with id: 3
Pokemon: charmander with id: 4
  console.log(`Get pokemon from ${endpoint}`);
  fetch(endpoint)
    .then(res => res.json())
    .then(data => console.log(`Pokemon: ${data.name} with id: ${data.id}`));
});
console.log("Script finished...");

When you run that script, you get this output

Get pokemon from https://pokeapi.co/api/v2/pokemon/1/
Get pokemon from https://pokeapi.co/api/v2/pokemon/2/
Get pokemon from https://pokeapi.co/api/v2/pokemon/3/
Get pokemon from https://pokeapi.co/api/v2/pokemon/4/
Get pokemon from https://pokeapi.co/api/v2/pokemon/5/
Script finished...
Pokemon: ivysaur with id: 2
Pokemon: bulbasaur with id: 1
Pokemon: charmeleon with id: 5
Pokemon: venusaur with id: 3
Pokemon: charmander with id: 4

Notice that, we run the promise, in this case fetch asynchronously. even though we modify the script to use async await like code below, it doesn’t matter it will give the same result

index.js

apiList.forEach(async endpoint => {
  console.log(`Get pokemon from ${endpoint}...`);
  await fetch(endpoint)
    .then(res => res.json())
    .then(data => console.log(`Pokemon: ${data.name} with id: ${data.id}`));
});

Still get the same output right??, now how to run it synchronously??.

Run It Synchronously

Instead using Array.forEach we can use for loop like this

index.js

(async () => {
  for (let index = 0; index < apiList.length; index++) {
    console.log(`Get pokemon from ${apiList[index]}...`);
    await fetch(apiList[index])
      .then(res => res.json())
      .then(data => console.log(`Pokemon: ${data.name} with id: ${data.id}`));
  }
  console.log("Finished");
})();

this code is the trick to run async await in top level javascript file.

(async () => {
  // your async await code
})();

you get output like this, which means it run synchronously or sequential one by one.

Get pokemon from https://pokeapi.co/api/v2/pokemon/1/...
Pokemon sync: bulbasaur with id: 1
Get pokemon from https://pokeapi.co/api/v2/pokemon/2/...
Pokemon sync: ivysaur with id: 2
Get pokemon from https://pokeapi.co/api/v2/pokemon/3/...
Pokemon sync: venusaur with id: 3
Get pokemon from https://pokeapi.co/api/v2/pokemon/4/...
Pokemon sync: charmander with id: 4
Get pokemon from https://pokeapi.co/api/v2/pokemon/5/...
Pokemon sync: charmeleon with id: 5
Finished

But that is not at all pretty☺

The Better Code

Okay, let’s make it better by creating a function and callback like this

const asyncForEach = async (array, callback) => {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
};

Now your script gonna look like this

index.js

(async () => {
  await asyncForEach(apiList, async endpoint => {
    console.log(`Get pokemon from ${endpoint}...`);
    await fetch(endpoint)
      .then(res => res.json())
      .then(data => console.log(`Pokemon: ${data.name} with id: ${data.id}`));
  });
  console.log("Finished");
})();

Much better, and it’s work

Get pokemon from https://pokeapi.co/api/v2/pokemon/1/...
Pokemon: bulbasaur with id: 1
Get pokemon from https://pokeapi.co/api/v2/pokemon/2/...
Pokemon: ivysaur with id: 2
Get pokemon from https://pokeapi.co/api/v2/pokemon/3/...
Pokemon: venusaur with id: 3
Get pokemon from https://pokeapi.co/api/v2/pokemon/4/...
Pokemon: charmander with id: 4
Get pokemon from https://pokeapi.co/api/v2/pokemon/5/...
Pokemon: charmeleon with id: 5
Finished

Typescript version

Oh you need the typescript version??, here we go

index.ts

const asyncForEach = async <T>(
  array: T[],
  callback: (item: T, index: number, array: T[]) => Promise<void>
) => {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
};