Angular Academy · Lekcja

Operatory transformacji

Używaj map, switchMap, mergeMap i concatMap.

Operatory transformacji to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 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.

Czym są operatory

Operatory to funkcje, które łączy się wewnątrz .pipe(), aby przekształcać strumień. Operatory transformacji zmieniają każdą wyemitowaną wartość lub spłaszczają Observable wewnętrzne do postaci wyjściowej.

map

map przekształca każdą wyemitowaną wartość, podobnie jak Array.map, ale w czasie.

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

Po co mapowanie wyższego rzędu

Gdy każda wartość uruchamia kolejny Observable (na przykład żądanie HTTP), powstaje Observable Observable. Operatory spłaszczające (switchMap, mergeMap, concatMap) subskrybują wewnętrzny Observable i emitują jego wartości.

switchMap

switchMap anuluje poprzedni wewnętrzny Observable, gdy pojawi się nowa wartość. Doskonale nadaje się do wyszukiwania podczas wpisywania — stare żądania są odrzucane.

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

mergeMap (alias flatMap) uruchamia wewnętrzne Observable współbieżnie i łączy wszystkie ich emisje. Nic nie jest anulowane.

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

concatMap umieszcza wewnętrzne Observable w kolejce i uruchamia je po jednym, w odpowiedniej kolejności, czekając na zakończenie każdego z nich. Używaj go, gdy kolejność ma znaczenie.

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

exhaustMap ignoruje nowe wartości, gdy wewnętrzny Observable jest nadal wykonywany. Doskonale zapobiega wielokrotnemu wysłaniu formularza po kliknięciu przycisku.

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

Wybór właściwego operatora spłaszczającego

switchMap: anulowanie poprzedniego (wyszukiwanie).
mergeMap: wszystko równolegle (niezależne zapisy).
concatMap: w kolejności, jeden po drugim (sekwencyjne zapisy).
exhaustMap: ignorowanie podczas zajętości (przycisk logowania).

switchMap i anulowanie

Ponieważ switchMap anuluje wykonywane wewnętrzne Observable, anuluje również subskrypcję bazowego żądania HTTP, co Angular przekłada na przerwanie żądania — oszczędzając przepustowość.

Łączenie map z operatorem spłaszczającym

Często używa się map do wyodrębniania danych po spłaszczeniu.

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

Unikaj zagnieżdżonych subskrypcji

Nigdy nie subskrybuj Observable wewnątrz innej subskrypcji. Zamiast tego użyj operatora spłaszczającego — zachowuje on deklaratywny charakter potoku i prawidłowo obsługuje sprzątanie.

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

Szybki test

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

Podsumowanie: operatory transformacji

map przekształca wartości, a operatory spłaszczające obsługują obserwowalne wewnętrzne.

switchMap: anuluje poprzednie.
mergeMap: wykonuje równolegle.
concatMap: wykonuje sekwencyjnie, zachowując kolejność.
exhaustMap: ignoruje wartości podczas działania.

Następnie: operatory filtrowania.

Często zadawane pytania

Czy lekcja „Operatory transformacji” jest bezpłatna?

Tak — pełny tekst „Operatory transformacji” 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 transformacji”?

Używaj map, switchMap, mergeMap i concatMap. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Operatory transformacji”?

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