JavaScript

async/awaitで待機されない

awaitを付け忘れている

こんな症状

awaitを書いたのに非同期処理の結果を待たずに次の行が実行される。async/awaitの使い方で起きやすいよ。

まず試す

非同期呼び出しに await が付いているか、関数に async が付いているか確認する。forEach 内の await は for...of に書き換える。

// ✅ 順番に待つなら for...of
for (const id of ids) {
  const res = await fetch("/api/users/" + id);
  console.log(await res.json());
}

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

✓await を付け忘れた
→ 非同期関数の呼び出しに await を付ける。
✓関数に async が無い
→ 関数宣言に async を付ける。
✓forEach の中で await した
→ forEach は待たない。for...of に書き換える（並列でよければ Promise.all）。

なぜ起きる？

関数にasyncを付けていない、awaitを付け忘れている、またはforEachの中でawaitを使っているよ。forEachはコールバック関数の戻り値（Promise）を待たないから、中でawaitを書いても並列実行されてしまうんだ。順番に実行したいならfor...ofを使う必要があるよ。

✕ エラーが起きるコード

async function loadUsers() {
  const ids = [1, 2, 3];
  ids.forEach(async (id) => {
    const res = await fetch('/api/users/' + id);
    console.log(await res.json());
  });
  console.log('完了');  // ← データより先に表示される！
}
// forEachはコールバックのPromiseを待たない

✓ 直したコード

async function loadUsers() {
  const ids = [1, 2, 3];
  // ✅ 順番に待ちたいなら for...of
  for (const id of ids) {
    const res = await fetch('/api/users/' + id);
    console.log(await res.json());
  }
  console.log('完了'); // 全部終わってから表示される
}