Angular Academy · Lekcja

Operatory łączenia

Łącz strumienie za pomocą combineLatest i forkJoin.

Operatory łączenia to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego warto łączyć strumienie

Rzeczywiste aplikacje koordynują wiele źródeł asynchronicznych: kilka wywołań HTTP, wartość formularza wraz z filtrem, kliknięcie wraz z najnowszym stanem. Operatory łączenia scalają wiele obserwowalnych w jeden.

combineLatest

combineLatest emituje tablicę najnowszych wartości z każdego źródła za każdym razem, gdy emituje dowolne źródło — po tym, jak każde źródło wyemituje co najmniej jedną wartość.

import { combineLatest } from 'rxjs';

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

Przypadek użycia combineLatest

Świetnie sprawdza się w przypadku wyliczanego stanu interfejsu: można połączyć wyszukiwane wyrażenie z filtrem kategorii, aby utworzyć zapytanie.

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

forkJoin

forkJoin czeka, aż wszystkie źródła zakończą działanie, a następnie emituje jedną tablicę ich ostatnich wartości. W RxJS jest odpowiednikiem 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);
});

Ograniczenie forkJoin

forkJoin niczego nie emituje, jeśli dowolne źródło nigdy się nie zakończy (na przykład interval) lub zakończy się błędem przed ukończeniem. Należy używać go w przypadku skończonych źródeł, takich jak żądania HTTP.

merge

merge spłaszcza wiele obserwowalnych do jednego, emitując wartości w miarę ich nadejścia z dowolnego źródła, bez parowania.

import { merge } from 'rxjs';

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

zip

zip paruje wartości według indeksu: emituje pierwszą wartość z każdego źródła, następnie drugą z każdego i tak dalej. Czeka, aż wszystkie źródła dostarczą kolejną wartość.

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 dodaje wartość początkową na początku strumienia, dzięki czemu combineLatest może emitować wartości, zanim każde źródło zacznie emitować.

import { startWith } from 'rxjs';

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

withLatestFrom

withLatestFrom emituje tylko wtedy, gdy emituje źródło, dołączając najnowsze wartości z pozostałych obserwowalnych. To źródło steruje działaniem, a pozostałe pozostają pasywne.

import { withLatestFrom } from 'rxjs';

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

concat dla sekwencyjnych strumieni

concat subskrybuje każde źródło w określonej kolejności i przechodzi do następnego dopiero po zakończeniu bieżącego. Należy używać go, gdy strumienie muszą działać ściśle jeden po drugim.

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 a forkJoin i zip

combineLatest: najnowsza wartość z każdego źródła przy każdej emisji.
forkJoin: ostatnia wartość z każdego źródła, gdy wszystkie się zakończą.
zip: wartości parowane według indeksu.
Należy wybrać operator zależnie od tego, czy potrzebne są bieżące aktualizacje, jednorazowe połączenie czy ścisłe parowanie.

Szybki test

Sprawdź swoją wiedzę na temat operatorów łączenia.

Podsumowanie: operatory łączenia

Operatory łączenia koordynują wiele strumieni.

combineLatest: najnowsza wartość z każdego źródła przy dowolnej emisji.
forkJoin: łączy wartości po zakończeniu działania (podobnie jak Promise.all).
merge: przeplata wszystkie emisje.
withLatestFrom: migawka pozostałych strumieni sterowana przez źródło.

Następnie: operatory obsługi błędów.

Często zadawane pytania

Czy lekcja „Operatory łączenia” jest bezpłatna?

Tak — pełny tekst „Operatory łączenia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Operatory łączenia”?

Łącz strumienie za pomocą combineLatest i forkJoin. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Operatory łączenia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy