57. Combinaison avancée : switchMap (Le pattern HTTP)

switchMap est peut-être l'opérateur RxJS le plus crucial dans le développement Angular, utilisé pour gérer les scénarios où un flux de données entrant (l'Observable extérieur) déclenche une nouvelle opération asynchrone secondaire (l'Observable intérieur, généralement une requête HTTP).

Le besoin d'opérateurs d'aplatissement (Flattening)

Lorsque vous utilisez map pour renvoyer un Observable HTTP, vous vous retrouvez avec un Observable d'Observable (Observable<Observable<Data>>). Les opérateurs d'aplatissement (switchMap, mergeMap, concatMap) résolvent cela en s'abonnant à l'Observable intérieur et en extrayant directement ses valeurs.

Comportement de switchMap

switchMap possède une fonctionnalité critique : l'annulation. Si la source extérieure émet une nouvelle valeur alors que l'Observable intérieur précédent est toujours en cours (ex : avant que la requête HTTP ne revienne), switchMap annule automatiquement la requête précédente avant de démarrer la nouvelle.

Cas d'usage : Champ de recherche en direct, où une frappe rapide ne doit déclencher une requête que pour la dernière valeur saisie, annulant les recherches obsolètes.

typescript import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';

// Imaginons que 'searchTerm$' est un Observable des changements de saisie searchTerm$.pipe( // 1. Attendre 300ms de silence avant de continuer debounceTime(300), // 2. Continuer seulement si le terme est différent du précédent distinctUntilChanged(), // 3. switchMap pour annuler la recherche précédente et démarrer la nouvelle switchMap(term => { if (!term) return of([]); // Renvoie l'Observable intérieur (la requête HTTP) return this.dataService.search(term); }) ).subscribe(results => { this.searchResults = results; });

Contraste avec mergeMap : mergeMap exécute tous les Observables intérieurs en parallèle, ce qui peut entraîner des résultats désordonnés. switchMap garantit que seule la réponse du dernier déclencheur est traitée.