JavaScript：非同期処理（Promise / async-await）

出力 == 42

async function getValue() { return 42; } を作り、async function main() の中で await getValue() する。最後に main() を呼ぶ。

async function getValue() {
  return 42;
}

async function main() {
  const value = await getValue();
  console.log(value);
}

main();

async を付けた関数の戻り値は必ず Promise になる。だから 42 をそのまま返しても、受け取る側は await が必要。

解答 == B

await は「結果が出るまで待って取り出す」役割。

B

表示すると [object Promise] や Promise { <pending> } になる。「なぜかデータが表示されない」の原因はほぼこれ。

出力 == 完了

new Promise((resolve) => setTimeout(() => resolve("完了"), 50)) を返す関数を作る。

const wait = () =>
  new Promise((resolve) => setTimeout(() => resolve("完了"), 50));

async function main() {
  console.log(await wait());
}

main();

resolve を呼んだ時点で「成功」が確定し、await していた場所に値が渡る。これがPromiseの基本の仕組み。

const getName = async () => "田中";

async function main() {
  const name = ____ getName();
  console.log(name);
}

main();

出力 == 田中

「待つ」という意味の英単語5文字。

await

これを書かないと Promise { '田中' } のような表示になる。非同期の関数を呼んだら awaitと覚える。

解答 == B

await と async は必ずセットで使う。

B

async の無い関数で await を書くと SyntaxError になる。非同期を扱う関数は、呼び出す側も連鎖的に async にしていく必要がある。

出力 == エラー：通信失敗

Promise.reject(new Error("通信失敗")) を await し、catch (e) で e.message を出す。

async function main() {
  try {
    await Promise.reject(new Error("通信失敗"));
  } catch (e) {
    console.log(`エラー：${e.message}`);
  }
}

main();

同期処理とまったく同じ書き方でエラーを扱えるのが async / await の最大の利点。ただし await を付け忘れると catch できないので注意。

const wait = (ms, v) => new Promise((r) => setTimeout(() => r(v), ms));

async function main() {
  const [a, b] = await Promise.____([wait(20, "A"), wait(20, "B")]);
  console.log(a, b);
}

main();

出力 == A B

「すべて」を意味する英単語3文字。

all

直列に await すると待ち時間が足し算になるが、Promise.all なら最も遅いものの時間で済む。20ms × 2 が 20ms になる。

解答 == B

互いに依存しない処理は同時に走らせられる。

B

AとCは合計9秒かかるが、Bなら3秒で終わる。ただし「前の結果を次で使う」場合は並列にできないので、順に await するしかない。

出力 == A → B

const a = await wait(...) を2回書く。先に書いたほうが先に完了する。

const wait = (ms, v) => new Promise((r) => setTimeout(() => r(v), ms));

async function main() {
  const a = await wait(30, "A");
  const b = await wait(10, "B");
  console.log(`${a} → ${b}`);
}

main();

await は「そこで止まる」。Bのほうが速いのに後になるのは、Aを待ち終わってから初めてBが開始されるため。これが直列実行。

出力 == fulfilled, rejected

allSettled は失敗しても止まらず、各要素の status を教えてくれる。map(r => r.status).join(", ") で取り出す。

async function main() {
  const results = await Promise.allSettled([
    Promise.resolve("成功"),
    Promise.reject(new Error("失敗")),
  ]);

  console.log(results.map((r) => r.status).join(", "));
}

main();

Promise.all は1つでも失敗すると全体が失敗するが、allSettled は全部の結果を最後まで集める。「一部が失敗しても残りは使いたい」場面で使う。

出力 == ID:1 田中

new Promise の中で setTimeout し、resolve にオブジェクトを渡す。受け取り側は分割代入できる。

const fetchUser = (id) =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id, name: id === 1 ? "田中" : "不明" });
    }, 30);
  });

async function main() {
  const { id, name } = await fetchUser(1);
  console.log(`ID:${id} ${name}`);
}

main();

実際のAPI通信もこれと同じ形。次章で学ぶ fetch は、まさにこういう Promise を返す関数になっている。

出力2行が完全一致

await なしの場合はテンプレートリテラルに入れると [object Promise] と表示される。

const getName = async () => "田中";

async function main() {
  const withAwait = await getName();
  const withoutAwait = getName();

  console.log(`await あり：${withAwait}`);
  console.log(`await なし：${withoutAwait}`);
}

main();

この [object Promise] を見たら await の付け忘れと即座に判断できるようにしておきたい。画面に出てしまう典型的なバグ。

出力3行が完全一致

Date.now() で開始時刻を記録し、終了時刻との差を測る。直列は await を3回、並列は Promise.all。

const wait = (ms, v) => new Promise((r) => setTimeout(() => r(v), ms));

async function main() {
  const t1 = Date.now();
  const a = await wait(30, "A");
  const b = await wait(30, "B");
  const c = await wait(30, "C");
  const serial = Date.now() - t1;
  console.log(`直列：${a},${b},${c}`);

  const t2 = Date.now();
  const results = await Promise.all([wait(30, "A"), wait(30, "B"), wait(30, "C")]);
  const parallel = Date.now() - t2;
  console.log(`並列：${results.join(",")}`);

  console.log(`並列のほうが速い：${parallel < serial}`);
}

main();

結果は同じでも、かかる時間が3倍違う。直列は約90ms、並列は約30ms。互いに依存しない処理を直列で書くのは、単なる時間の無駄になる。

出力4行が完全一致

for...of の中で try/catch する。ループの外に成功・失敗のカウンタを用意する。

const fetchUser = (id) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id === 2) {
        reject(new Error("取得失敗"));
        return;
      }
      resolve(id === 1 ? "田中" : "高橋");
    }, 10);
  });

async function main() {
  let ok = 0;
  let ng = 0;

  for (const id of [1, 2, 3]) {
    try {
      const name = await fetchUser(id);
      console.log(`[${id}] ${name}`);
      ok++;
    } catch (e) {
      console.log(`[${id}] ${e.message}`);
      ng++;
    }
  }

  console.log(`成功${ok}件 / 失敗${ng}件`);
}

main();

try/catch をループの中に置くのが要点（JS10と同じ）。外に置くと最初の失敗で全体が止まる。reject を呼ぶと catch に飛ぶ。

出力4行。試行1〜3回目と成功（3回目）

let attempt = 0 を外に置き、for ループの中で try/catch する。成功したら return、失敗なら次の周回へ。

let count = 0;

const unstable = () =>
  new Promise((resolve, reject) => {
    count++;
    setTimeout(() => {
      if (count < 3) {
        reject(new Error("失敗"));
        return;
      }
      resolve("データ");
    }, 10);
  });

async function retry(maxAttempts) {
  for (let i = 1; i <= maxAttempts; i++) {
    console.log(`試行${i}回目...`);

    try {
      await unstable();
      console.log(`成功（${i}回目）`);
      return;
    } catch (e) {
      if (i === maxAttempts) {
        console.log("すべて失敗しました");
      }
    }
  }
}

retry(3);

通信は一時的に失敗することがあるので、実務では再試行が標準的に組み込まれる。本来は失敗のたびに待ち時間を延ばす（指数バックオフ）が、まずはこの形を押さえたい。