29. Gestion des erreurs dans les appels HTTP
Les APIs renvoient inévitablement des erreurs (ex : 404 Not Found, 500 Server Error, 401 Unauthorized). Les applications robustes doivent gérer ces échecs avec élégance. Puisque HttpClient renvoie des Observables, nous utilisons les opérateurs RxJS, spécifiquement catchError et le callback error dans l'abonnement.
1. Gérer les erreurs dans l'abonnement
L'approche la plus basique consiste à utiliser le callback error défini dans l'objet subscribe (comme vu précédemment).
typescript this.dataService.getUsers().subscribe({ next: (data) => { /* succès */ }, error: (httpError) => { // Gère les erreurs déclenchées par la requête (4xx ou 5xx) console.error('Erreur HTTP :', httpError); this.errorMessage = httpError.message; } });
2. Utiliser l'opérateur RxJS catchError (Dans le Service)
Si vous souhaitez gérer l'erreur ou la transformer avant que le composant ne s'abonne, utilisez l'opérateur catchError, qui doit être importé de rxjs/operators.
typescript // data.service.ts import { catchError } from 'rxjs/operators'; import { Observable, throwError } from 'rxjs'; import { HttpErrorResponse } from '@angular/common/http';
private handleError(error: HttpErrorResponse) {
let errorMessage = 'Une erreur inconnue est survenue !';
if (error.error instanceof ErrorEvent) {
// Erreur côté client ou réseau
errorMessage = Erreur Client : ${error.error.message};
} else {
// Le backend a renvoyé un code de réponse infructueux.
errorMessage = Erreur Serveur : ${error.status} - ${error.message};
}
console.error(errorMessage);
// Renvoyer un observable avec un message d'erreur compréhensible par l'utilisateur
return throwError(() => new Error(errorMessage));
}
getUsersWithCatch(): Observable<User[]> {
return this.http.get<User[]>(${this.baseUrl}/users-error-url).pipe(
// Ajout de l'opérateur catchError à la chaîne de l'observable
catchError(this.handleError)
);
}
En gérant l'erreur dans le service, le composant ne voit qu'un seul flux (soit les données réussies, soit l'Observable d'erreur personnalisé), ce qui simplifie la logique du composant.