Gestion globale des erreurs dans Angular

Pour détecter les erreurs lors de l'abonnement à un service dans Angular 17 et basculer le chargement ou d'autres états de l'interface utilisateur, vous pouvez utiliser la méthode d'abonnement des observables avec les opérateurs RxJS comme catchError. Voici une approche étape par étape :

Exemple :

1. Appel de service avec indicateur de chargement :

• Définissez un indicateur de chargement sur true avant de démarrer l'appel de service.
• Abonnez-vous au service et gérez les réponses de réussite et d'erreur.
• Réinitialisez l'indicateur de chargement sur false lorsque l'appel est terminé (en cas de succès ou d'échec).

2. Erreurs de gestion :

• Utilisez l'opérateur catchError à l'intérieur du pipeline observable pour détecter et gérer les erreurs.
• Affichez éventuellement une notification ou un message d'erreur en utilisant quelque chose comme Toastr.

Exemple de code :

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

Points clés :

• Drapeau de chargement : Le drapeau de chargement est utilisé pour afficher/masquer la flèche de chargement. Il est défini sur true avant l'appel de service et réinitialisé sur false dans les rappels d'erreur et d'achèvement.

• Gestion des erreurs : l'opérateur catchError est utilisé pour détecter l'erreur, la gérer (par exemple, la consigner, afficher une notification) et empêcher l'application de planter. Il renvoie un observable vide (of(null)) pour que l'abonnement puisse se terminer.

• Notification Toastr : Le ToastrService est utilisé pour afficher des notifications pour les événements de réussite et d'erreur. Ajustez cela en fonction de votre système de notification si vous utilisez autre chose.

Cette approche vous aide à maintenir l'état de chargement, à détecter les erreurs et à gérer avec élégance les scénarios de réussite et d'échec tout en gardant l'interface utilisateur réactive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!