Angular でのグローバル エラー処理

Angular 17 でサービスにサブスクライブしているときにエラーをキャッチし、読み込みまたはその他の UI 状態を切り替えるには、catchError などの RxJS 演算子とともにオブザーバブルの submit メソッドを使用できます。段階的なアプローチは次のとおりです:

例:

1.ローディングインジケーターを使用したサービスコール:

• サービス呼び出しを開始する前に、読み込みフラグを true に設定します。
• サービスに登録し、成功応答とエラー応答を処理します。
• 呼び出しが完了すると (成功または失敗のいずれかで) 読み込みフラグを false にリセットします。

2.エラー処理:

• 監視可能なパイプライン内で catchError 演算子を使用して、エラーをキャッチして処理します。
• オプションで、Toastr などを使用して通知またはエラー メッセージを表示します。

サンプルコード:

import { Component } from '@angular/core';
import { MyService } from './my-service.service'; // Your service here
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { ToastrService } from 'ngx-toastr'; // If you are using Toastr for notifications

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  loading = false;   // Flag to toggle loading indicator
  data: any = null;  // Variable to hold the service response data

  constructor(private myService: MyService, private toastr: ToastrService) { }

  getData() {
    this.loading = true;  // Start loading before the service call
    this.myService.getData()  // Call the service method
      .pipe(
        catchError((error) => {
          this.toastr.error('Failed to fetch data', 'Error');  // Show an error notification
          console.error(error);  // Log the error (optional)
          this.loading = false;  // Stop loading on error
          return of(null);  // Return an empty observable to prevent further issues
        })
      )
      .subscribe(
        (response) => {
          this.data = response;  // Handle successful response
          this.toastr.success('Data fetched successfully!', 'Success');  // Success notification
        },
        () => {
          this.loading = false;  // Stop loading on error (handled in catchError as well)
        },
        () => {
          this.loading = false;  // Stop loading on completion (either success or error)
        }
      );
  }
}

キーポイント:

• 読み込みフラグ: 読み込みフラグは、読み込みスピナーの表示/非表示に使用されます。サービス呼び出しの前に true に設定され、エラーと完了の両方のコールバックで false にリセットされます。

• エラー処理: catchError オペレーターは、エラーをキャッチして処理し (ログに記録する、通知を表示するなど)、アプリケーションのクラッシュを防ぐために使用されます。サブスクリプションを完了できるように、空のオブザーバブル (of(null)) を返します。

• Toastr 通知: ToastrService は、成功イベントとエラー イベントの通知を表示するために使用されます。他のものを使用している場合は、通知システムに基づいてこれを調整してください。

このアプローチは、UI の応答性を維持しながら、読み込み状態を維持し、エラーをキャッチし、成功と失敗の両方のシナリオを適切に処理するのに役立ちます。

以上がAngular でのグローバル エラー処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。