JavaScriptの非同期処理をマスターしよう！ async/await と forEach ループの徹底解説

JavaScript、Node.js、Promiseにおける async/await と forEach ループの使用方法

JavaScriptの async/await は非同期処理をより簡単に記述するための強力なツールです。一方、forEach ループは配列の要素を反復処理する便利な方法です。しかし、forEach ループ内で非同期処理を行う場合、async/await を直接使用することはできません。

問題点

forEach ループは非同期処理を待ってくれないため、ループ内のすべての処理が完了する前に次の処理に移ってしまいます。

const urls = ["https://example.com/1", "https://example.com/2", "https://example.com/3"];

urls.forEach(async url => {
  const response = await fetch(url);
  console.log(response.statusText);
});

// すべてのレスポンスが取得される前にログが出力される

解決策

async/await と forEach ループを一緒に使用するには、いくつかの方法があります。

for...of ループは async/await と自然に連携させることができます。

for (const url of urls) {
  const response = await fetch(url);
  console.log(response.statusText);
}

// すべてのレスポンスが取得された後にログが出力される

Promise.all は複数の Promise をまとめて処理し、すべてが完了するのを待ってから結果を返します。

const promises = urls.map(url => fetch(url));

Promise.all(promises).then(responses => {
  responses.forEach(response => console.log(response.statusText));
});

// すべてのレスポンスが取得された後にログが出力される

ライブラリを使用する

async-forEach などのライブラリは、forEach ループ内で async/await を簡単に使用できるようにします。

const asyncForEach = require("async-forEach");

asyncForEach(urls, async url => {
  const response = await fetch(url);
  console.log(response.statusText);
});

// すべてのレスポンスが取得された後にログが出力される

async/await と forEach ループを一緒に使用するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあるため、状況に合わせて適切な方法を選択する必要があります。

for...of ループを使用する

const urls = ["https://example.com/1", "https://example.com/2", "https://example.com/3"];

async function main() {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(response.statusText);
  }
}

main();

Promise.all を使用する

const urls = ["https://example.com/1", "https://example.com/2", "https://example.com/3"];

async function main() {
  const promises = urls.map(url => fetch(url));
  const responses = await Promise.all(promises);
  responses.forEach(response => console.log(response.statusText));
}

main();

const asyncForEach = require("async-forEach");

const urls = ["https://example.com/1", "https://example.com/2", "https://example.com/3"];

async function main() {
  await asyncForEach(urls, async url => {
    const response = await fetch(url);
    console.log(response.statusText);
  });
}

main();

実行結果

200
200
200

各方法の詳細

注意事項

async/await と forEach ループを使用するその他の方法

async 関数と forEach ループを使用する

async 関数を使用して、forEach ループ内のコードを非同期的に実行することができます。

const urls = ["https://example.com/1", "https://example.com/2", "https://example.com/3"];

async function main() {
  urls.forEach(async url => {
    const response = await fetch(url);
    console.log(response.statusText);
  });
}

main();

const urls = ["https://example.com/1", "https://example.com/2", "https://example.com/3"];

async function* main() {
  for (const url of urls) {
    const response = await fetch(url);
    yield response.statusText;
  }
}

const generator = main();

(async () => {
  for (const statusText of generator) {
    console.log(statusText);
  }
})();

const urls = ["https://example.com/1", "https://example.com/2", "https://example.com/3"];

async function* main() {
  for (const url of urls) {
    const response = await fetch(url);
    yield response.statusText;
  }
}

const iterator = main();

(async () => {
  for await (const statusText of iterator) {
    console.log(statusText);
  }
})();