55. Opérateurs courants : tap, delay, et catchError

Ces opérateurs sont critiques pour le débogage, le contrôle du timing et la gestion des échecs de flux.

1. tap (Effets secondaires)

tap vous permet d'exécuter des effets secondaires (comme le logging, la mise à jour de l'état d'un composant, le débogage) sans modifier les valeurs circulant dans l'Observable.

typescript import { tap } from 'rxjs/operators';

this.dataService.getUsers().pipe( tap(data => { // Utile pour le débogage : regarder les données avant traitement console.log('DEBUG : Données reçues de l'API :', data); this.isLoading = false; // Mise à jour de l'état ici (effet secondaire) }), map(users => users.length) // Le pipe continue normalement ).subscribe(count => console.log('Total utilisateurs :', count));

2. delay (Contrôle du timing)

delay met le flux en pause pendant une durée spécifiée avant de réémettre la valeur. Utile pour simuler une latence réseau ou des transitions visuelles.

typescript import { delay } from 'rxjs/operators';

of('A', 'B', 'C').pipe( delay(2000) // Attend 2 secondes avant d'émettre la séquence ).subscribe(val => console.log(val));

3. catchError (Gestion d'erreurs)

Comme vu dans la section HTTP, catchError intercepte les erreurs de l'Observable source. Il permet de gérer l'erreur, de la loguer, puis soit de la renvoyer, soit de fournir un nouveau flux de secours pour éviter que l'application ne plante.

typescript import { catchError, of } from 'rxjs/operators'; import { throwError } from 'rxjs';

// ... imaginons un observable qui pourrait échouer

failedObservable$.pipe( catchError(err => { console.error('Opération échouée, utilisation des données de secours.', err); // Option 1 : Fournir une valeur/flux de secours (le flux continue) return of([]);

// Option 2 : Renvoyer une nouvelle erreur (le flux se termine)
// return throwError(() => new Error('Échec critique'));

}) ).subscribe(data => { // data sera la donnée originale OU le tableau vide de secours });