Operator switchMap służy do pobrania danych ze źródła typu Observable.

To, co charakteryzuje switchMap, to możliwość anulowania emisji danych z poprzedniego wywołania. W momencie, gdy nasze źródło wysyła nowe dane poprzednia subskrypcja jest anulowana - pod warunkiem że nie zakończyła się w chwili emisji nowych danych.

W przeciwieństwie do operatora mergeMap switchMap pozwala na subskrypcję, w danej chwili tylko jednego źródła danych.

Za każdym razem, gdy wyślemy dane z podanego źródła poprzednia emisja, zostanie anulowana.

Jeśli zależy Ci na:

1. Tylko jednej subskrypcji (w danym momencie) z obiektu typu Observable
2. Na możliwości anulowania poprzedniej emisji danych

To użyj switchMap.

Przykłady

Przykład 1

import { fromEvent, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const interval$ = interval(1000);

const click$ = fromEvent(document, 'click');

click$
    .pipe(
        switchMap((e) => interval$)
    )
    .subscribe(console.log);

Wynik:

0
1
2
3
(kliknięcie)
0
1
2
...

Po kliknięciu przyciskiem myszy w stronę startuje licznik co sekundę, emitując nowe dane (interval$). Drugie kliknięcie powoduje anulowanie poprzedniej subskrypcji i start nowej.

Przykład 2

import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { switchMap } from 'rxjs/operators';

const API_URL = 'https://jsonplaceholder.typicode.com/todos/';

const click$ = fromEvent(document, 'click');

click$
    .pipe(
        switchMap((e) => {
            const id = parseInt(Math.random() * 20) + 1;
            return ajax.getJSON(`${API_URL}/${id}`);
        })
    )
    .subscribe(console.log);

Kliknij drugi raz odpowiednio szybko, zanim przyjdzie odpowiedź z pierwszego żądania — zostanie wysłane nowe zapytanie + anulowane zostanie poprzednie.

Operator mergeMap służy do pobrania danych ze źródła typu Observable przekazanego do tego operatora.

Dane z podanego źródła są wysyłane natychmiast kiedy będą dostępne. To znaczy, że kolejność odbioru danych nie jest gwarantowana. Dodatkowo dane z takiego źródła są pobierane za pomocą mergeMap równocześnie.

Przykłady

Przykład 1

import { fromEvent, interval } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const interval$ = interval(1000);

const click$ = fromEvent(document, 'click');

click$
    .pipe(
        mergeMap((e) => interval$)
    )
    .subscribe(console.log);

Po kliknięci przyciskiem myszy na stronie zostanie wywołany obiekt Observable: interval$, który co sekundę emituje sygnał. Każde kolejne kliknięcie powoduje start emitowania danych z nowego źródła.

Czyli możemy osiągnąć taki wynik: 0, 1, 2 nowe kliknięcie: 3, 0, 4, 1, 5, 2 itd.

Przykład 2

import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { mergeMap } from 'rxjs/operators';

const API_URL = 'https://jsonplaceholder.typicode.com/todos/';

const click$ = fromEvent(document, 'click');

click$
    .pipe(
        mergeMap((e) => {
            const id = parseInt(Math.random() * 20) + 1;
            return ajax.getJSON(`${API_URL}/${id}`);
        })
    )
    .subscribe(console.log);

Wystarczy klikać szybko przyciskiem myszy w stronę. Dane będą pobierane w tym samym czasie, nie czekając na zakończenie poprzedniego żądania.

We wrześniu opublikowałem 6 wpisów:

RxJS:

1. Operator take
2. Operator takeWhile

Webstorm:

1. Jak sprawdzić historię zmian danego fragmentu kodu?

Git:

1. Jak szybko przejść do ostatnio odwiedzanej gałęzi?

Narysowałem dwa komiksy:

1. Deadline
2. New code vs Old code

Przeczytałem dwie książki:

1. Oblicza Wielkiej Brytanii - Dariusz Rosiak
2. Zostań ultrasamoukiem - Scott Young

Przesłuchałem dwa audiobooki:

1. Chodź ze mną - Łukasz Orbitowski
2. Srebrna Łania z Visby - Andrzej Pilipiuk