JavaScriptで `fetch` を使う時のエラーハンドリングの方法

はじめに

JavaScriptでAPIをFetchするときのエラーハンドリングの方法をまとめます
。この記事では、fetch を使った非同期処理で起こり得る異なるエラータイプと、それらを効果的にハンドルする方法について解説します。

エラータイプ

非同期処理では主に次の三種類のエラーが考えられます：

1. ネットワークエラー:

   • これは fetch がネットワーク接続がない、またはリクエストが何らかの理由で送信できない場合に発生します。

2. HTTPエラーステータス:

   • リクエストが送信され、サーバーがエラーステータスコード（例: 404 Not Found, 500 Internal Server Error）と共にレスポンスを返した場合です。

3. データ処理エラー:

   • レスポンスが正常に受信されたが、例えばJSONとして無効であるなど、データの処理中に問題が発生した場合です。

エラーハンドリングの実装

以下は、これらのエラーを適切に処理するための一般的な実装例です：

// 非同期関数の定義
async function fetchData(url) {
  try {
    // fetchリクエストを送信
    const response = await fetch(url);

    // HTTPレスポンスステータスをチェック
    if (!response.ok) {
      throw new Error(`サーバーからの応答が異常です: ${response.status}`);
    }

    // JSONとしてレスポンスをパース
    const data = await response.json();
    console.log('取得したデータ:', data);

  } catch (error) {
    // ネットワークエラーまたはデータ処理エラーの捕捉
    console.error('エラーが発生しました:', error);
  }
}

// 実際にAPIからデータを取得するための関数呼び出し
fetchData('https://api.example.com/data');

エラーハンドリングのポイント

• ネットワークエラーは fetch 関数が例外を投げることで検出されます。これにより接続の問題やリクエストの失敗を捕捉します。
• HTTPエラーステータスのチェックは、response.ok プロパティを評価することで行います。これにより、サーバーが返すHTTPステータスコードが成功を示しているかどうかを判断できます。
• データ処理エラーは、通常JSONの解析など、レスポンスの内容を処理する際に発生します。これも try...catch ブロック内で捕捉されるため、一元的なエラーハンドリングが可能です。