Globale Fehlerbehandlung in Angular

Um Fehler beim Abonnieren eines Dienstes in Angular 17 abzufangen und den Lade- oder andere UI-Status umzuschalten, können Sie die subscribe-Methode von Observables zusammen mit RxJS-Operatoren wie CatchError verwenden. Hier ist eine Schritt-für-Schritt-Anleitung:

Beispiel:

1. Serviceruf mit Ladeanzeige:

• Setzen Sie ein Ladeflag auf „True“, bevor Sie den Serviceabruf starten.
• Abonnieren Sie den Dienst und bearbeiten Sie Erfolgs- und Fehlerantworten.
• Setzen Sie das Ladeflag auf „false“ zurück, wenn der Anruf abgeschlossen ist (entweder bei Erfolg oder Misserfolg).

2. Handhabungsfehler:

• Verwenden Sie den CatchError-Operator innerhalb der beobachtbaren Pipeline, um Fehler abzufangen und zu behandeln.
• Optional können Sie eine Benachrichtigung oder Fehlermeldung mit etwas wie Toastr anzeigen.

Beispielcode:

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)
        }
      );
  }
}

Wichtige Punkte:

• Ladeflag: Das Ladeflag wird verwendet, um den Ladespinner anzuzeigen/auszublenden. Es wird vor dem Serviceaufruf auf „true“ gesetzt und sowohl im Fehler- als auch im Abschlussrückruf auf „false“ zurückgesetzt.

• Fehlerbehandlung: Der CatchError-Operator wird verwendet, um den Fehler abzufangen, ihn zu behandeln (z. B. ihn zu protokollieren, eine Benachrichtigung anzuzeigen) und zu verhindern, dass die Anwendung abstürzt. Es gibt ein leeres Observable (von (null)) zurück, damit das Abonnement abgeschlossen werden kann.

• Toastr-Benachrichtigung: Der ToastrService wird verwendet, um Benachrichtigungen für Erfolgs- und Fehlerereignisse anzuzeigen. Passen Sie dies basierend auf Ihrem Benachrichtigungssystem an, wenn Sie etwas anderes verwenden.

Dieser Ansatz hilft Ihnen, den Ladezustand aufrechtzuerhalten, Fehler zu erkennen und sowohl Erfolgs- als auch Fehlerszenarien elegant zu bewältigen, während die Benutzeroberfläche reaktionsfähig bleibt.

Das obige ist der detaillierte Inhalt vonGlobale Fehlerbehandlung in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!