RxJS Operátorok

RxJS Operátorok: concatMap, mergeMap, switchMap, exhaustMap

Az RxJS egyik legfontosabb funkciója az operátorok használata, amelyek lehetővé teszik az Observable-ek átalakítását és kezelését. Ebben a cikkben a concatMap, mergeMap, switchMap és exhaustMap operátorokat vizsgáljuk meg, és mindegyikhez mutatunk egy egyszerű, futtatható példát.

1. concatMap

A concatMap sorban hajtja végre a belső Observable-eket. Amíg egy belső Observable nem fejeződik be, nem kezdi el a következő hívást.

Használat:

• Jó választás, ha a műveleteket sorban szeretnénk végrehajtani.

• Megőrzi az események sorrendjét.

Példa:

import { of, interval } from 'rxjs';
import { concatMap, take } from 'rxjs/operators';

of(1, 2, 3).pipe(
  concatMap(value => interval(1000).pipe(take(2)))
).subscribe(console.log);

Kimenet (időben): 0 1 0 1 0 1 (2 másodpercenként új szám indul)

---

2. mergeMap

A mergeMap párhuzamosan futtatja a belső Observable-eket, tehát azonnal indít egy új Observable-t, amint érkezik egy új érték a forrásból.

Használat:

• Jó választás, ha párhuzamosan futtatható műveletekre van szükség.

• Nem garantálja a sorrendet.

Példa:

of(1, 2, 3).pipe(
  mergeMap(value => interval(1000).pipe(take(2)))
).subscribe(console.log);

Kimenet (időben): 0 0 0 1 1 1 (az összes belső Observable egyszerre indul)

---

3. switchMap

A switchMap mindig az aktuális értékre vált: ha új érték érkezik, a korábbi belső Observable megszakad, és egy új indul el.

Használat:

• Jó választás, ha mindig csak az utolsó értéket szeretnénk figyelni (pl. keresési mező autocomplete).

• Az előző kérést eldobja, ha új érkezik.

Példa:

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

fromEvent(document, 'click').pipe(
  switchMap(() => interval(1000).pipe(take(3)))
).subscribe(console.log);

Kimenet: minden kattintás elindít egy új számlálást, de a korábbi megszakad.

---

4. exhaustMap

Az exhaustMap figyelmen kívül hagyja az új értékeket, amíg az aktuális Observable fut. Ha egy Observable elindult, a következőket addig eldobja, amíg az aktuális be nem fejeződik.

Használat:

• Jó választás olyan esetekben, amikor meg kell akadályozni, hogy egy művelet többször fusson egyszerre (pl. bejelentkezési folyamatok).

Példa:

fromEvent(document, 'click').pipe(
  exhaustMap(() => interval(1000).pipe(take(3)))
).subscribe(console.log);

Kimenet: az első kattintás után 3 másodpercig nem reagál új kattintásra.

---

Összegzés

Operátor	Mikor használjuk?	Sorrend?	Több belső Observable egyszerre?
concatMap	Sorrend megtartása fontos	✅	❌
mergeMap	Párhuzamosan kell futtatni	❌	✅
switchMap	Csak a legutóbbi érték érdekes	❌	❌
exhaustMap	Egy folyamatot nem akarunk újraindítani, amíg fut	✅	❌

Ezekkel az operátorokkal hatékonyan kezelheted az RxJS-ben az események áramlását és az aszinkron folyamatokat. Ha egy műveletnek meg kell várnia az előző befejezését, használd a concatMap-et. Ha párhuzamos futás kell, akkor a mergeMap a jó választás. Ha mindig a legfrissebb eseményt kell figyelni, akkor a switchMap működik a legjobban. Ha pedig egy folyamatnak nem szabad újraindulnia, amíg fut, akkor az exhaustMap az ideális választás.