How to Use Async/await With .map in JavaScript | by Jordan Jaramillo | Apr, 2022

And know whether or not Promise.all is quicker than “for of”

Photograph by PAUL SMITH on Unsplash

In some unspecified time in the future, you could have questioned use asynchronous capabilities in strategies like .map or .forEach. On this quick information, you will note what the most typical errors are and remedy them.

For this we may have the next base code within the index.ts file:

const usernames: string[] = ["jordanrjdev", "anonymous123", "channelyy"];const simulateFetchData = (username: string): Promise<string> => 
return new Promise((resolve) =>
setTimeout(() =>
resolve(`$username is a sound username`);
, 1000);
);

As you may see now we have an array of usernames and a operate that takes a parameter and returns a string.

Now we’ll iterate the array of usernames to acquire the simulated knowledge of every person with the map technique:

const dataUsers = usernames.map(async (username) => 
return await simulateFetchData(username);
);
console.log(dataUsers);

However when executing this we’ll see within the console the next consequence:

[ Promise  <pending> , Promise  <pending> , Promise  <pending>  ]

So to resolve it now we have two choices, that are to make use of Promise.all or use a for of:

We’re going to use a for of to have the ability to remedy this error that is quite common and might make us lose loads of time when looking for probably the most acceptable resolution.

const getWithForOf = async() => 
console.time("for of");
const knowledge = []
for (const username of usernames)
let dataUser = await simulateFetchData(username);
knowledge.push(dataUser);

console.timeEnd("for of");

getWithForOf();

With this feature the code can be executed sequentially, so you may look ahead to every name. This may assist us get every iteration resolved earlier than transferring on to the subsequent.

Take into account that if we do an N variety of iterations and every of those takes 1 second to resolve. In our instance, it means that it’ll take a complete of three seconds to complete executing this portion of code. We will see this within the console output because of console.time:

for of: 3.012s

Now we’ll use the promise.all technique to resolve our downside, so we may have the next code:

const getWithPromiseAll = async() => 
console.time("promise all");
let knowledge = await Promise.all(usernames.map(async (username) =>
return await simulateFetchData(username);
))
console.timeEnd("promise all");
getWithPromiseAll();

As you may see now we have a Promise.all technique which receives an array of guarantees, keep in mind that the the next code:

usernames.map(async (username) => return await simulateFetchData(username);)

returns an array of guarantees, simply what we want so we move it to Promise.all to resolve them.

This technique will trigger all asynchronous code to be resolved in parallel.

So in contrast to the for of, let’s see how lengthy it takes to execute this operate within the console:

promise all: 980.3000000119209ms

So if now we have a quantity N of asynchronous capabilities, they are going to be executed and resolved with out ready between them, which might turn out to be useful in some particular circumstances.

Typically for efficiency causes we might want to execute our guarantees in parallel with Promise.all and different instances we might want to do it in sequence with the for of loop. The vital factor is that you just perceive the distinction between every one and adapt it to your wants.

You possibly can see the entire code on this code sandbox repository

Thanks for studying.

More Posts