How to loop through JavaScript asynchronous processing

This article explains how to process Promise asynchronous processing synchronously in JavaScript .

Is there a way to loop through asynchronous processing?

You can loop asynchronous processing by using Promise and async/await.

Loop processing method for asynchronous processing

　JavaScript is basically asynchronous processing, and loop processing must also be performed asynchronously. Therefore, normal for and while statements cannot perform asynchronous processing.

Instead, asynchronous processing can be looped through the use of Promise and async/await.

The sample program below introduces two types of loop processing: asynchronous loop processing using promises and asynchronous processing loop processing using async/await.

Loop processing of asynchronous processing using promises

// Example using Promise
for (let i = 0; i < 5; i++) {
  new Promise(resolve => {
    setTimeout(() => {
      console.log(i);
      resolve();
    }, 1000);
  }).then(() => {
    // processing
  });
}

In the sample above, “Example using Promise,” a for statement is used to repeat the process five times.

　In it, we are using Promises to perform asynchronous processing. I am using the setTimeout function to display the value of i in the console.log function after 1 second and calling the resolve function to resolve the Promise. Use the then function to write the process to be performed when the asynchronous process ends.

Looping asynchronous processing using async/await

//  Example using async/await
async function loop() {
  for (let i = 0; i < 5; i++) {
    await new Promise(resolve => {
      setTimeout(() => {
        console.log(i);
        resolve();
      }, 1000);
    });
    // processing
  }
}
loop();

“Example using async/await” uses async/await to perform asynchronous processing. A loop function is defined and a for statement is used within it to repeat the process 5 times.

We use await to wait for a Promise, and when the asynchronous process is finished, we perform the next process. I am using the setTimeout function to display the value of i in the console.log function after 1 second and calling the resolve function to resolve the Promise.

How to loop asynchronous processing using “for await”

In addition to using Promise and async/await, there is another way to perform asynchronous loop processing: for await .

To use for await, use an iterable object such as an array or iterator. The following is an example of asynchronous loop processing using for await.

const promiseArray = [
  new Promise(resolve => setTimeout(() => resolve(1), 1000)),
  new Promise(resolve => setTimeout(() => resolve(2), 2000)),
  new Promise(resolve => setTimeout(() => resolve(3), 3000))
];

for await (const value of promiseArray) {
  console.log(value);
}

In this example, the promiseArray array contains three Promise objects, and we use for await to execute each Promise in turn.

By using for await, you can loop through asynchronous processing more concisely than using promises or async/await.

summary

“How to loop asynchronous processing” is summarized below.

When performing asynchronous loop processing, you can use Promise, async/await, and for await to perform asynchronous processing that cannot be performed with normal for and while statements.

We were able to process asynchronous processing in a loop!