Js Wait for Promise Resolve to Continue for Loop

Asynchronous operations are crucial when working with web applications. We can all agree how easy async/await has made our lives while dealing with asynchronous operations.

In this post, we are going to see how to use loops with async/await.

Before we dive into it, here are the utility functions I used for the demo

// creates a logger function to print logs with function nam function getLogger(fnName) {   return function logger(value, diffInMS) {     return console.log(       `${fnName}: Item ${value} finished waiting ${Math.round(         diffInMS / 1000       )} seconds later.`     );   }; }  // simulates an async flow, a network request for example async function waitFor(seconds) {   // used to create the fancy waterfall   fetch("https://random-data-           api.com/api/stripe/random_stripe" + Math.random());    // the fake asynchronous task   return new Promise((resolve, reject) => {     setTimeout(resolve, seconds * 1000);   }); }        

The classic For loop

const list = [1, 2, 3, 4, 5, 6, 7, 8 , 9, 10];  export async function mainWithFor() {   const start = Date.now();   const logger = getLogger("mainWithFor");   for (const item of list) {     await waitFor(2);     const later = Date.now();     logger(item, later - start);   } }        

Runs the code sequentially, one by one. Waiting for eachwaitForto finish before proceeding to the next iteration.

The image below shows a nice waterfall demonstration, look how each green section starts 2 seconds after the previous one. (don't worry about their duration, as it's a random endpoint. Only for the sake of waterfall depiction)

You'll also notice that the logs appear at a 2-second difference, one by one.

A good use case for this approach would be to run sequential operations, where you want the next operation to run once the former has finished.

The forEach higher-order method

export async function mainWithForEach() {   const start = Date.now();   const logger = getLogger("mainWithForEach");   list.forEach(async (item) => {     await waitFor(2);     const later = Date.now();     logger(item, later - start);   }); }        

TheforEachloop acts differently than the for loop, while the for loopawaitthe iteration before moving further, theforEachloop executes all of the iterations simultaneously. So all the ten executions start at the same point and log after 2 seconds.

We can also observe the same using a waterfall diagram, look how they all began at the same time. (Again please ignore the duration of each execution, it's random-api).

A good use case for this approach would be to run parallel operations, where you don't care if the previous one finished or not. It's much faster compared to for loop. But there is a caveat to this approach: if the api you're requesting has some sort of rate-limiting setup then making simultaneous requests can backfire.

The map higher-order method

export async function mainWithMap() {   const start = Date.now();   const logger = getLogger("mainWithMap");   const promises = list.map(async (item) => {     await waitFor(2);     const later = Date.now();     logger(item, later - start);   });   const finalAnswer = await Promise.all(promises) }        

Themapfunction behaves exactly the same asforEachin terms of async operations, meaning all of the callbacks start at the same time and log exactly after 2 seconds.

On top of this, the .map returns an array of promises, (one promise per execution, in the same order).

Later we can do an await Promise.all(promises) to get the final answer array from it.

map should be used at places where you would need to return some data based on each async operation. If that's not the case, sticking with forEach wouldn't be a bad choice.

Here is the link to codesandbox, in case you want to try this out yourself.

I have also created a YouTube video giving hands-on explanation to this post,

I hope this post was helpful to you. Should you have any feedback or questions, please feel free to ask them in the comments below. I would love to hear and work on them.

Please follow me for more such posts.

phelansinut1966.blogspot.com

Source: https://www.linkedin.com/pulse/asynchronous-loops-javascript-using-foreach-map-loop-bhardwaj?trk=public_profile_article_view

Share this post