Angular Academy · Leçon

Opérateurs de gestion des erreurs

Récupérez-vous avec catchError et retry.

Opérateurs de gestion des erreurs est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Erreurs dans les observables

Lorsqu'un observable émet une erreur, il se termine : il n'y a plus de valeurs et le gestionnaire d'erreurs s'exécute. Les opérateurs d'erreur permettent de récupérer, de réessayer ou de transformer les erreurs au lieu d'interrompre le flux.

Le chemin des erreurs

Gérez les erreurs dans l'observateur ou à l'aide d'opérateurs. Sans gestion, une erreur non traitée peut interrompre l'abonnement.

this.http.get('/api/data').subscribe({
  next: d => console.log(d),
  error: err => console.error('failed', err)
});

catchError

catchError intercepte une erreur et renvoie un observable de remplacement, ce qui permet au flux de continuer correctement.

import { catchError, of } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error(err);
    return of([]); // fallback value
  })
).subscribe(data => console.log(data));

Relancer certaines erreurs

Dans catchError, vous pouvez examiner l'erreur et décider de la traiter ou de la relancer avec throwError.

import { catchError, throwError, of } from 'rxjs';

source$.pipe(
  catchError(err =>
    err.status === 404 ? of(null) : throwError(() => err)
  )
).subscribe();

retry

retry(n) se réabonne à la source jusqu'à n fois lorsqu'une erreur survient — pratique pour les défaillances réseau temporaires.

import { retry } from 'rxjs';

this.http.get('/api/flaky').pipe(
  retry(2) // try up to 3 times total
).subscribe(d => console.log(d));

retry avec configuration

La forme objet ajoute un délai entre les tentatives et prend en charge une fonction de temporisation progressive, ce qui évite de surcharger le serveur de requêtes.

this.http.get('/api/flaky').pipe(
  retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));

Temporisation progressive de type retryWhen

Pour une temporisation progressive exponentielle, l'option delay peut être une fonction qui renvoie un observable retardant progressivement chaque tentative.

import { timer } from 'rxjs';

source$.pipe(
  retry({
    delay: (err, count) => timer(count * 1000)
  })
).subscribe();

catchError après retry

Combinez-les : réessayez les défaillances temporaires, puis utilisez une solution de repli si toutes les tentatives échouent.

this.http.get('/api/data').pipe(
  retry({ count: 2, delay: 500 }),
  catchError(() => of([]))
).subscribe(data => console.log(data));

L'emplacement est important

La position de catchError dans le pipeline détermine la portée. À l'intérieur de switchMap, il intercepte les erreurs de chaque requête interne et maintient le flux externe actif ; à la fin, il intercepte toutes les erreurs.

term$.pipe(
  switchMap(t => this.http.get('/api?q=' + t).pipe(
    catchError(() => of([])) // outer stream survives
  ))
).subscribe();

EMPTY comme solution de repli silencieuse

Renvoyer EMPTY depuis catchError termine le flux sans valeur — utile lorsque vous souhaitez ignorer l'erreur et ne rien émettre.

import { EMPTY, catchError } from 'rxjs';

source$.pipe(
  catchError(() => EMPTY)
).subscribe();

finalize pour le nettoyage

finalize exécute une fonction de rappel lorsque le flux se termine, quelle qu'en soit la raison — achèvement, erreur ou désabonnement. Associez-le à la gestion des erreurs pour réinitialiser systématiquement l'état de chargement.

import { finalize, catchError, of } from 'rxjs';

this.loading = true;
source$.pipe(
  catchError(() => of([])),
  finalize(() => this.loading = false)
).subscribe();

Vérification rapide

Vérifiez votre compréhension de la gestion des erreurs.

Récapitulatif : opérateurs de gestion des erreurs

Les erreurs terminent un flux lorsqu'elles ne sont pas gérées.

catchError : récupère l'erreur en renvoyant un observable de remplacement.
retry : se réabonne en cas d'échec, avec un délai ou une temporisation progressive facultative.
L'emplacement, à l'intérieur de switchMap ou à la fin, contrôle la portée.

Vous avez terminé le chapitre consacré aux opérateurs RxJS en profondeur.

Questions Fréquemment Posées

La leçon « Opérateurs de gestion des erreurs » est-elle gratuite ?

Oui — le texte complet de « Opérateurs de gestion des erreurs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Opérateurs de gestion des erreurs » ?

Récupérez-vous avec catchError et retry. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Opérateurs de gestion des erreurs » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy