Angular Academy · Lezione

Operatori di combinazione

Combini gli stream con combineLatest e forkJoin.

Lezione 3 di 413 passaggi

Operatori di combinazione è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Perché combinare gli stream

Le applicazioni reali coordinano più sorgenti asincrone: diverse chiamate HTTP, un valore di un modulo insieme a un filtro, un clic insieme allo stato più recente. Gli operatori di combinazione uniscono più observable in uno solo.

combineLatest

combineLatest emette un array contenente il valore più recente di ogni sorgente ogni volta che emette una qualsiasi sorgente, dopo che tutte hanno emesso almeno una volta.

import { combineLatest } from 'rxjs';

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

Caso d'uso di combineLatest

È ideale per lo stato derivato dell'interfaccia: combina un termine di ricerca e un filtro per categoria per produrre una query.

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

forkJoin

forkJoin attende che tutte le sorgenti siano completate, quindi emette un unico array contenente i loro ultimi valori. È l'equivalente RxJS di 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);
});

Avvertenza su forkJoin

forkJoin non emette nulla se una delle sorgenti non viene mai completata, come nel caso di un interval, oppure restituisce un errore prima del completamento. Lo utilizzi per sorgenti finite, come le richieste HTTP.

merge

merge appiattisce più observable in uno solo, emettendo i valori man mano che arrivano da qualsiasi sorgente, senza abbinarli.

import { merge } from 'rxjs';

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

zip

zip abbina i valori in base all'indice: emette il primo valore di ciascuna sorgente, poi il secondo e così via. Attende che tutte le sorgenti producano il valore successivo.

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 antepone un valore iniziale, così combineLatest può emettere prima che ogni sorgente abbia prodotto un valore.

import { startWith } from 'rxjs';

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

withLatestFrom

withLatestFrom emette solo quando emette la sorgente, aggiungendo i valori più recenti degli altri observable. È la sorgente a guidare il flusso; gli altri sono passivi.

import { withLatestFrom } from 'rxjs';

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

concat per stream sequenziali

concat sottoscrive ogni sorgente nell'ordine e passa a quella successiva solo dopo il completamento di quella corrente. Lo utilizzi quando gli stream devono essere eseguiti rigorosamente uno dopo l'altro.

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 e zip a confronto

combineLatest: l'ultimo valore di ciascuna sorgente, a ogni emissione.
forkJoin: l'ultimo valore di ciascuna sorgente, una volta completate tutte.
zip: valori abbinati in base all'indice.
Scelga l'operatore in base alla necessità di aggiornamenti continui, di un'unione singola o di un abbinamento rigoroso.

Verifica rapida

Verifichi la Sua comprensione degli operatori di combinazione.

Rispondi nella lezione interattiva

Riepilogo: operatori di combinazione

Gli operatori di combinazione coordinano più stream.

combineLatest: l'ultimo valore di ciascuna sorgente a ogni emissione.
forkJoin: unione al completamento, simile a Promise.all.
merge: interlacciamento di tutte le emissioni.
withLatestFrom: istantanea degli altri stream guidata dalla sorgente.

Prossimo argomento: operatori per la gestione degli errori.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 38
Lezioni: 144

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Operatori di combinazione» è gratuita?

Sì — il testo completo di «Operatori di combinazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Operatori di combinazione»?

Combini gli stream con combineLatest e forkJoin. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Operatori di combinazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy