Angular Academy · leksjon

Kombinasjonsoperatorer

Kombiner strømmer med combineLatest og forkJoin.

Leksjon 3 av 413 trinn

Kombinasjonsoperatorer er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hvorfor kombinere strømmer

Virkelige apper samordner flere asynkrone kilder: flere HTTP-kall, en skjemaverdi sammen med et filter, eller et klikk sammen med den nyeste tilstanden. Kombinasjonsoperatorer slår sammen flere observabler til én.

combineLatest

combineLatest sender ut en tabell med den nyeste verdien fra hver kilde hver gang en hvilken som helst kilde sender ut en verdi – etter at alle har sendt ut minst én gang.

import { combineLatest } from 'rxjs';

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

Bruksområde for combineLatest

Dette egner seg godt for avledet UI-tilstand: kombiner et søkeord og et kategorifilter for å lage en spørring.

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

forkJoin

forkJoin venter til alle kildene fullfører, og sender deretter ut én tabell med den siste verdien fra hver av dem. Det tilsvarer RxJS-versjonen av 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);
});

Forbehold for forkJoin

forkJoin sender ikke ut noe hvis en kilde aldri fullfører (for eksempel et intervall), eller hvis den får en feil før den fullfører. Bruk den for endelige kilder, for eksempel HTTP-forespørsler.

merge

merge flater ut flere observabler til én og sender ut verdier etter hvert som de kommer fra en hvilken som helst kilde, uten parvis kobling.

import { merge } from 'rxjs';

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

zip

zip kobler sammen verdier etter indeks: den sender ut den første fra hver kilde, deretter den andre fra hver, og så videre. Den venter på at alle kildene skal produsere den neste verdien.

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 legger til en startverdi først. Det er nyttig for at combineLatest skal kunne sende ut en verdi før alle kildene har sendt ut noe.

import { startWith } from 'rxjs';

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

withLatestFrom

withLatestFrom sender bare ut når kilden sender ut, og legger ved de nyeste verdiene fra de andre observablene. Kilden styrer, mens de andre er passive.

import { withLatestFrom } from 'rxjs';

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

concat for sekvensielle strømmer

concat abonnerer på hver kilde i rekkefølge og går videre til den neste først når den gjeldende fullfører. Bruk den når De trenger at strømmene kjører strengt etter hverandre.

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 kontra forkJoin kontra zip

combineLatest: den nyeste verdien fra hver kilde ved enhver utsending.
forkJoin: den siste verdien fra hver kilde når alle har fullført.
zip: kobling etter indeks.
Velg ut fra om De trenger løpende oppdateringer, en engangskobling eller streng parvis kobling.

Hurtigsjekk

Test forståelsen Deres av kombinasjonsoperatorer.

Besvar den i den interaktive leksjonen

Oppsummering: kombinasjonsoperatorer

Kombinasjonsoperatorer samordner flere strømmer.

combineLatest: den nyeste verdien fra hver kilde ved enhver utsending.
forkJoin: kobler sammen ved fullføring (ligner på Promise.all).
merge: fletter alle utsendinger.
withLatestFrom: et kildebasert øyeblikksbilde av de andre.

Neste: operatorer for feilhåndtering.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Kombinasjonsoperatorer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Kombinasjonsoperatorer», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Kombinasjonsoperatorer»?

Kombiner strømmer med combineLatest og forkJoin. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Kombinasjonsoperatorer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy