56. Combiner des Observables : forkJoin et combineLatest

De nombreuses fonctionnalités nécessitent de récupérer des données de plusieurs endpoints simultanément. RxJS propose diverses fonctions pour fusionner des flux de données.

1. forkJoin (Attendre que tout soit terminé)

forkJoin est analogue à Promise.all(). Il prend un tableau d'Observables et attend que chacun se termine. Une fois tous terminés, il émet un tableau unique (ou un objet) contenant la dernière valeur de chaque source, puis se termine.

Cas d'usage : Récupérer plusieurs données indépendantes nécessaires simultanément (ex : données Utilisateur et Paramètres lors du chargement de la page).

typescript import { forkJoin, of } from 'rxjs';

const user$ = this.http.get('/api/user/1'); const permissions$ = this.http.get('/api/permissions');

forkJoin([user$, permissions$]).subscribe( ([userData, permissionData]) => { console.log('Toutes les données sont chargées :', userData, permissionData); // Initialiser l'état de l'application } );

2. combineLatest (Réagir à tout changement)

combineLatest prend plusieurs Observables et émet une nouvelle valeur dès que l'un des Observables source émet. La valeur émise est un tableau contenant la dernière valeur de chaque source.

Cas d'usage : Mises à jour en temps réel basées sur deux ou plusieurs sources dépendantes (ex : filtrer une liste basée sur un flux d'entrée texte ET un flux de sélection de menu déroulant).

typescript import { combineLatest, timer } from 'rxjs';

const timerOne$ = timer(1000, 4000); // émet 0, 1, 2, ... const timerTwo$ = timer(2000, 4000); // émet 0, 1, 2, ...

combineLatest([timerOne$, timerTwo$]).subscribe( ([t1, t2]) => { console.log(T1: ${t1}, T2: ${t2}); } );

/* Exemple de séquence de sortie : (attend 2s) T1: 0, T2: 0 (à 4s) T1: 1, T2: 0 (à 6s) T1: 1, T2: 1 */

Différence clé : forkJoin ne s'émet qu'une fois ; combineLatest reste actif et continue d'émettre.