非同期のエラーに備える

01 / 05

非同期処理は失敗しやすい

通信相手のサーバーが落ちている、電波が切れた、見つからなかった（404）。

非同期処理は、自分のコードが正しくても失敗することが日常茶飯事だ。だからこそ、エラーハンドリングが必須になる。

02 / 05

いつもの try / catch が使える！

Promise のときは .catch() をチェーンしていたけれど、async / await の世界では、章10で学んだ try / catch がそのまま使える！

await で待っている処理が失敗すると、その場で catch ブロックへジャンプするよ。

const run = async () => {  try {    const p = Promise.reject("通信エラー");    const data = await p;    console.log(data);  } catch (error) {    console.log("失敗を受け止めた:", error);  }};run();

実行結果

失敗を受け止めた: 通信エラー

03 / 05

落ちずに安全に続けられる

catch で受け止めたあとは、何事もなかったかのように続きのコードが動く。

「エラーメッセージを出す」「初期値を代わりに使う」といった安全な対策（フォールバック）が取れるよ。

const run = async () => {  let items = [];  try {    items = await Promise.reject("サーバー障害");  } catch (error) {    console.log("予備データを使います");    items = ["オフラインデータ"];  }  console.log(items[0]);};run();

実行結果

予備データを使います
オフラインデータ

04 / 05

finally で片づけをする

成功しても失敗しても必ず行いたい処理（ローディング表示を消すなど）は、finally に書く。

画面のスピナー（ぐるぐる）を止める処理は、まさにこの finally の定位置だよ。

const run = async () => {  try {    await Promise.resolve("成功");  } finally {    console.log("読み込み完了");  }};run();

実行結果

読み込み完了

05 / 05

まとめて確かめよう

ここまでを整理しておこう。

await を try { } で囲む
失敗したら catch (error) { } へ飛ぶ
finally { } で成功・失敗を問わず後片づけ
現場のフロントエンドでは必須の作法

それじゃあ、非同期エラーを受け止めてみよう。