JavaScript　非同期処理をループ処理する方法

JavaScriptでPromiseの非同期処理を同期して処理する方法について解説します。

非同期処理をループ処理する方法はありますか？

Promiseやasync/awaitを使用することで非同期処理をループ処理することができます。

非同期処理のループ処理方法

　JavaScriptは非同期処理が基本的になっており、ループ処理も非同期的に行う必要があります。そのため、通常のfor文やwhile文では非同期処理を行うことができません。

代わりに、Promiseやasync/awaitを使用することで非同期処理をループ処理することができます。

以下のサンプルプログラムでは、Promiseを使用した非同期処理のループ処理とasync/awaitを使用した非同期処理のループ処理の2つを紹介しています。

Promiseを使用した非同期処理のループ処理

// Promiseを使用した例
for (let i = 0; i < 5; i++) {
  new Promise(resolve => {
    setTimeout(() => {
      console.log(i);
      resolve();
    }, 1000);
  }).then(() => {
    // 処理
  });
}

上記のサンプルの「Promiseを使用した例」では、for文を使用して5回繰り返す処理を行っています。

　その中で、Promiseを使用して非同期処理を行っています。setTimeout関数を使用して、1秒後にconsole.log関数でiの値を表示し、resolve関数を呼び出してPromiseを解決しています。then関数を使用して非同期処理が終わった時に行う処理を記述します。

async/awaitを使用した非同期処理のループ処理

// async/awaitを使用した例
async function loop() {
  for (let i = 0; i < 5; i++) {
    await new Promise(resolve => {
      setTimeout(() => {
        console.log(i);
        resolve();
      }, 1000);
    });
    // 処理
  }
}
loop();

「async/awaitを使用した例」では、async/awaitを使用して非同期処理を行っています。loop関数を定義し、その中でfor文を使用して、5回繰り返す処理を行っています。

　awaitを使用してPromiseを待ち、非同期処理が終わったら次の処理を行っています。setTimeout関数を使用して、1秒後にconsole.log関数でiの値を表示し、resolve関数を呼び出してPromiseを解決しています。

CHECK

async/await との違い： async/awaitはPromiseをより簡潔に記述するためのシンタックスシュガーであり、本質的にはPromiseと同じです。Promiseを使用した方法とasync/awaitを使用した方法はほぼ同じですが、async/awaitを使用することでより読みやすいコードを書くことができます。

「for await」を使用した非同期処理をループする方法

　非同期処理のループ処理には、Promiseを使用した方法やasync/awaitを使用した方法の他に、for awaitを使用する方法もあります。

　for awaitを使用するには、配列やイテレーターなどのイテレーブルなオブジェクトを使用します。以下は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);
}

　この例では、promiseArray配列には3つのPromiseオブジェクトが格納されており、for awaitを使用してそれぞれのPromiseを順番に実行しています。

for awaitを使用することで、Promiseを使用した方法やasync/awaitを使用した方法よりも簡潔に非同期処理をループ処理することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。