In RxJS, mapping operators are essential when you deal with observables that emit other observables (like making API calls inside a stream). They control how inner subscriptions are handled and how concurrency works.
The four main players are:
forkJoin – Wait for all, then emit once
• My Language: All api call complete then only give response.
• Behavior: Runs multiple observables in parallel, waits until all complete, then emits a single combined value (array or object).
• Best for: Fetching multiple independent requests where you only need results after all are done (e.g., load user profile + orders + settings).
• Important: If any observable errors, forkJoin errors. If any observable never completes, forkJoin never emits.
TimeLine example:-
Obs1: ---- a ----|
Obs2: -------- b ----|
Obs3: - c ----|
Result: [a, b, c]|
switchMap – Keep the latest
• My Language: Cancel previous api call and take latest api call.
• Behavior: Cancels the previous inner observable when a new one comes in, only the latest is active.
• Use case: Perfect for typeahead / search where you only care about the most recent result.
• Example: User types in a search box → cancel the old API call, only the newest request matters.
TimeLine example:-
Source: A --- B ----- C ----
Inner: aaaaa bbbbb ccccc
Result: ccccc
mergeMap – Run in parallel
• My Language: Multiple api call for each value.
• Behavior: Subscribes to all inner observables as they arrive, runs concurrently.
• Use case: Useful for independent async tasks like logging, saving analytics, or multiple API calls where order doesn’t matter.
• Warning: Can overwhelm if the source emits too fast (unbounded concurrency). Use mergeMap(concurrency: n) to limit.
TimeLine example:-
Source: A --- B ----- C ----
Inner: aaaaa bbbbb ccccc
Result: aaaaa bbbbb ccccc
concatMap – Queue one by one
• My Language: Nested api call | Sequentially api call.
• Behavior: Processes inner observables sequentially, waiting for one to complete before starting the next.
• Use case: Best for ordered operations like saving form steps, database transactions, or uploading files where sequence matters.
TimeLine example:-
Source: A --- B ----- C ----
Inner: aaaaa bbbbb ccccc
Result: aaaaa bbbbb ccccc
exhaustMap – Ignore new until done
• Simple Language: Ignore multiple api call.
• Behavior: Ignores any new emissions while an inner observable is still running. Keeps only the first until it finishes.
• Use case: Great for login / submit buttons to prevent duplicate requests (e.g., double-clicking “Pay” button).
TimeLine example:-
Source: A --- B ----- C ----
Inner: aaaaa
Result: aaaaa
Quick Cheat Sheet
• switchMap → Latest wins (search, live updates).
• mergeMap → All run (parallel tasks).
• concatMap → One at a time, in order (queue jobs).
• exhaustMap → First wins, ignore rest until done (prevent spam clicks).
Final Thoughts
Choosing the right operator is less about syntax and more about intent:
• Do I care about only the latest? → switchMap
• Do I want everything at once? → mergeMap
• Do I need order preserved? → concatMap
• Do I want to block duplicates? → exhaustMap
git Repo
Comments
Post a Comment