Angular Academy · Leçon

Opérateurs de combinaison

Combinez les flux avec combineLatest et forkJoin.

Opérateurs de combinaison est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Pourquoi combiner les flux

Les applications réelles coordonnent plusieurs sources asynchrones : plusieurs appels HTTP, une valeur de formulaire avec un filtre, ou un clic avec l'état le plus récent. Les opérateurs de combinaison fusionnent plusieurs observables en un seul.

combineLatest

combineLatest émet un tableau contenant la dernière valeur de chaque source chaque fois qu'une source quelconque émet — après que toutes ont émis au moins une fois.

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

Cas d'utilisation de combineLatest

Idéal pour un état d'interface dérivé : combinez un terme de recherche et un filtre de catégorie pour produire une requête.

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoin attend que toutes les sources soient terminées, puis émet un tableau contenant leur dernière valeur. C'est l'équivalent RxJS de Promise.all.

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

Limite de forkJoin

forkJoin n'émet rien si une source ne se termine jamais (comme un intervalle) ou rencontre une erreur avant de se terminer. Utilisez-le pour des sources finies, comme les requêtes HTTP.

merge

merge aplatit plusieurs observables en un seul et émet les valeurs au fur et à mesure de leur arrivée depuis n'importe quelle source, sans les associer.

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

zip associe les valeurs par index : il émet la première valeur de chaque source, puis la deuxième de chaque source, et ainsi de suite. Il attend que toutes les sources produisent la valeur suivante.

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWith ajoute une valeur initiale au début, ce qui permet à combineLatest d'émettre avant que chaque source ait émis.

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFrom n'émet que lorsque la source émet, en lui associant les dernières valeurs des autres observables. La source dirige le flux ; les autres restent passifs.

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

concat pour des flux séquentiels

concat s'abonne à chaque source dans l'ordre et ne passe à la suivante qu'une fois la source actuelle terminée. Utilisez-le lorsque les flux doivent s'exécuter strictement l'un après l'autre.

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest, forkJoin ou zip

combineLatest : dernière valeur de chaque source, à chaque émission.
forkJoin : dernière valeur de chaque source, une fois toutes les sources terminées.
zip : valeurs associées par index.
Choisissez l'opérateur selon que vous avez besoin de mises à jour continues, d'une combinaison ponctuelle ou d'une association stricte.

Vérification rapide

Vérifiez votre compréhension des opérateurs de combinaison.

Récapitulatif : opérateurs de combinaison

Les opérateurs de combinaison coordonnent plusieurs flux.

combineLatest : dernière valeur de chaque source à chaque émission.
forkJoin : combinaison à la fin des sources, comme Promise.all.
merge : entrelace toutes les émissions.
withLatestFrom : instantané des autres sources, dirigé par la source.

Ensuite : les opérateurs de gestion des erreurs.

Questions Fréquemment Posées

La leçon « Opérateurs de combinaison » est-elle gratuite ?

Oui — le texte complet de « Opérateurs de combinaison » 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 combinaison » ?

Combinez les flux avec combineLatest et forkJoin. 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 3 sur 4.

Combien de temps prend la leçon « Opérateurs de combinaison » ?

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