HTTP リクエストの例外処理をマスター！ TypeScript と Angular でのベストプラクティス

TypeScript と Angular で http.request() から例外を正しくキャッチする方法

HTTP リクエストは、Web 開発において重要な役割を果たしますが、ネットワークエラーやサーバーエラーなど、予期せぬ問題が発生する可能性があります。これらの例外を適切に処理しないと、アプリケーションがクラッシュしたり、予期しない動作を引き起こしたりする可能性があります。

このチュートリアルでは、TypeScript と Angular で http.request() から例外を正しくキャッチする方法について説明します。

必要な知識

このチュートリアルを理解するには、以下の知識が必要です。

• TypeScript の基本的な構文
• Angular の基本的な概念
• HTTP リクエストの基礎知識

方法

http.request() メソッドは、Observable<Response> を返します。これは、subscribe() メソッドを使用して購読できるイベント ストリームです。subscribe() メソッドには、次の 3 つのコールバック関数が渡されます。

• next: リクエストが成功したときに呼び出されます。

例外をキャッチするには、error コールバック関数を使用します。このコールバック関数は、HttpErrorResponse オブジェクトを受け取ります。このオブジェクトには、エラーに関する情報が含まれています。

以下の例は、http.request() から例外をキャッチする方法を示しています。

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {

  constructor(private http: HttpClient) { }

  getData() {
    this.http.get('https://my-api.com/data')
      .subscribe(
        response => {
          console.log(response);
        },
        error => {
          console.error('Error:', error);
        }
      );
  }
}

この例では、getData() メソッドは https://my-api.com/data に対する GET リクエストを実行します。リクエストが成功した場合、next コールバック関数が呼び出され、応答データがコンソールに出力されます。リクエストが失敗した場合、error コールバック関数が呼び出され、エラー情報がコンソールに出力されます。

補足

• HttpErrorResponse オブジェクトには、次のプロパティが含まれています。
  • status: エラー コード
  • message: エラー メッセージ
  • error: エラーの詳細情報
• エラー処理をより複雑にする場合は、カスタム エラー ハンドラーを作成できます。
• エラーをログに記録したり、ユーザーにエラー メッセージを表示したりすることもできます。

TypeScript と Angular で http.request() から例外をキャッチするサンプルコード

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.getData();
  }

  getData() {
    this.http.get('https://my-api.com/data')
      .subscribe(
        response => {
          console.log('Success:', response);
        },
        error => {
          console.error('Error:', error);
          if (error.status === 404) {
            // 404 エラーの場合は、ユーザーにエラー メッセージを表示します。
            alert('データが見つかりませんでした。');
          } else {
            // その他のエラーの場合は、エラーの詳細情報をログに記録します。
            console.error('詳細情報:', error.message, error.error);
          }
        }
      );
  }
}

説明

このコードは、以下のことを行います。

1. HttpClient インジェクターから HttpClient サービスを取得します。
2. ngOnInit() ライフサイクル フックで getData() メソッドを呼び出します。
3. getData() メソッドは https://my-api.com/data に対する GET リクエストを実行します。
4. リクエストが成功した場合、next コールバック関数が呼び出され、応答データがコンソールに出力されます。
5. エラー コードが 404 の場合は、ユーザーにエラー メッセージを表示します。
6. その他のエラーの場合は、エラーの詳細情報をログに記録します。

このサンプルコードは、基本的なエラー処理を示しています。実際には、アプリケーションのニーズに合わせてエラー処理を拡張する必要があります。

• エラーをログファイルに記録する
• エラーを分析サービスに送信する
• ユーザーに再試行を促す
• エラーに基づいてアプリケーションの状態を変更する

TypeScript と Angular で http.request() から例外を正しくキャッチすることは、エラーを処理し、アプリケーションを安定させるために重要なことです。このチュートリアルとサンプルコードを参考に、独自のエラー処理ロジックを作成してください。

TypeScript と Angular で http.request() から例外をキャッチするその他の方法

catchError オペレーターは、Observable チェーンにエラー処理ロジックを追加するために使用できます。以下の例は、catchError オペレーターを使用して、http.get() リクエストからの例外をキャッチする方法を示しています。

import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {

  constructor(private http: HttpClient) { }

  getData() {
    this.http.get('https://my-api.com/data')
      .pipe(
        catchError(error => {
          console.error('Error:', error);
          if (error.status === 404) {
            return of({ message: 'データが見つかりませんでした。' });
          } else {
            return of({ message: '予期せぬエラーが発生しました。' });
          }
        })
      )
      .subscribe(response => {
        console.log('Response:', response);
      });
  }
}

この例では、catchError オペレーターを使用して、エラーが発生したときに新しい Observable を返すようにしています。新しい Observable は、エラー メッセージを含むオブジェクトを発行します。

retryWhen オペレーターは、ネットワークエラーなどの一時的なエラーが発生した場合に、リクエストを再試行するために使用できます。以下の例は、retryWhen オペレーターを使用して、ネットワークエラーが発生した場合に最大 3 回リクエストを再試行する方法を示しています。

import { HttpClient } from '@angular/common/http';
import { from } from 'rxjs';
import { retryWhen } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {

  constructor(private http: HttpClient) { }

  getData() {
    this.http.get('https://my-api.com/data')
      .pipe(
        retryWhen(errors => errors.pipe(
          mergeMap(error => {
            if (error.status < 500) {
              return from(interval(1000)); // 1 秒後に再試行
            } else {
              return throwError(error);
            }
          })
        ))
      )
      .subscribe(response => {
        console.log('Response:', response);
      });
  }
}

この例では、retryWhen オペレーターを使用して、エラー ストリームを監視しています。エラーが検出された場合、オペレーターは 1 秒後に再試行するように信号を送信します。エラーが 500 番台 (サーバーエラー) の場合は、再試行せず、エラーをスローします。

カスタム エラー ハンドラーを作成する

より複雑なエラー処理が必要な場合は、カスタム エラー ハンドラーを作成できます。カスタム エラー ハンドラーは、エラーの種類に基づいて異なる処理を実行できます。

以下の例は、カスタム エラー ハンドラーを作成する方法を示しています。

import { HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ErrorHandlerService {

  constructor() { }

  handleError(error: HttpErrorResponse) {
    switch (error.status) {
      case 404:
        // 404 エラーの場合は、ユーザーにエラー メッセージを表示します。
        alert('データが見つかりませんでした。');
        break;
      case 500:
        // 500 エラーの場合は、エラーをログに記録します。
        console.error('サーバーエラーが発生しました。', error);
        break;
      default:
        // その他のエラーの場合は、デフォルトのエラー処理を実行します。
        console.error('予期せぬエラーが発生しました。', error);
    }
  }
}

この例では、ErrorHandlerService というカスタム エラー ハンドラーを作成