RxJS: Operator concatMap

Opublikowano: 27.10.2022 - tagi: JavaScript RxJS Operator

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

Działa w taki sposób, że czeka, aż zakończy się aktualne wywołanie z podanego źródła i wywołuje ewentualnie następną emisję danych.

Jeśli zależy Ci na kolejności wywołań z danego źródła użyj concatMap.

Przykład

import { fromEvent, of } from 'rxjs';
import { concatMap, delay, map } from 'rxjs/operators';

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

click$.pipe(
    concatMap((event) => of(event).pipe(
        map(event => ({
          x: event.clientX,
          y: event.clientY
        })),
        delay(1000)
    )),
).subscribe(console.log)

Kliknij gdziekolwiek na stronie dwa razy. Co sekundę będą wyświetlane koordynaty poszczególnego kliknięcia. W podanej kolejności: pierwsze kliknięcie, drugie itd.