非同期コードのエラー

非同期操作は同期操作とは異なり失敗します。エラーはすぐには発生しません。それは「後で」、Promise が拒否状態になるときに到着します。 2 つの主要なツールを見てみましょう。

`try/catch` と `await`

失敗した Promise の前に await を置くと、エラーは再スローされます。通常の例外: try/catch でキャッチします。

async function safeRead() {
  try {
    const r = await fetch('/api/cose');
    if (!r.ok) throw new Error('HTTP ' + r.status);
    return await r.json();
  } catch (err) {
    console.error('network error:', err.message);
    return null;
  }
}

これは最も読みやすいパターンです。「ハッピーパス」を直線的に記述し、すべてを 1 つのブロックで処理します。

`.catch` の約束

連鎖スタイルの場合:

fetch('/api/cose')
  .then((r) => r.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

.catch は、前のチェーンに沿ってスローされたあらゆるエラーを捕捉します。

`Promise.all` は最初の拒否で失敗します

const ps = [Promise.resolve(1), Promise.reject(new Error('no')), Promise.resolve(3)];
try {
  const r = await Promise.all(ps);
} catch (err) {
  console.log(err.message); // 'no'
}

他の Promise はバックグラウンドで実行され続けますが、Promise.all は最初のエラーで「解決」します。すべての結果 (失敗を含む) が必要な場合は、Promise.allSettled を使用します。

const outcomes = await Promise.allSettled(ps);
// [{ status: 'fulfilled', value: 1 },
//  { status: 'rejected', reason: Error('no') },
//  { status: 'fulfilled', value: 3 }]

試してみてください

運動#js.m7.l4.e1

試行回数: 0読み込み中…

`readOrFallback(p, fallback)` を非同期に定義します。Promise p を待ってみます。拒否された場合はフォールバックを返します。

エディターを読み込み中…

ヒントを表示

try { return await p; } catch { フォールバックを返します。 }

3 回の試行後に解決策が利用可能になります

復習演習

運動#js.m7.l4.e2