Usage of rxjs mergemap

Be careful ：

1. flatMap yes mergeMap Another name for .
2. If only one internal subscription can be activated at a time , Please use switchMap.
3. If inside observables The order of launch and subscription is very important , Please use concatMap.

When you need to flatten the inside observable But when you want to manually control the number of internal subscriptions , yes mergeMap Excellent use occasion .

for example , When using switchMap when , Each internal subscription is completed when the feed is issued , That is, only one active internal subscription is allowed in any time period . by comparison ,mergeMap Allow multiple internal subscriptions to be activated at the same time . therefore ,mergeMap One of the most common use cases is a request that should not be cancelled , These requests are considered write rather than read .

A typical example is SAP Amount of different items in e-commerce cloud shopping cart , You can increase or decrease in parallel .

Please note that , If these writes must remain in order , be concatMap It's a better choice . For example, database write operation .

because mergeMap Maintain internal subscriptions for multiple activities at once , Therefore, memory leaks may occur due to long-standing internal subscriptions . A basic example is , If you use an internal timer or dom Event flows are mapped to observable objects . In these cases , If you still want to use mergeMap, A good idea is to use another operator to manage the completion of internal subscriptions , Consider, for example take or takeUntil. You can use it, of course concurrent Parameter limits the number of internal subscriptions to an activity .

Take an example ：

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

// faking network request for save
const saveLocation = location => {
    
  return of(location).pipe(delay(500));
};
// streams
const click$ = fromEvent(document, 'click');

click$
  .pipe(
    mergeMap((e: MouseEvent) => {
    
      return saveLocation({
    
        x: e.clientX,
        y: e.clientY,
        timestamp: Date.now()
      });
    })
  )
  // Saved! {x: 98, y: 170, ...}
  .subscribe(r => console.log('Saved!', r));

saveLocation It's a function , It can take any incoming input parameter , Wrap into one Observable, And this Observable Not immediately emit data , It's a delay 500 millisecond .

mergeMap Receive a function as an input parameter , The input parameter of this function is through pipe link mergeMap Of Observable The elements contained in , namely MouseEvent;project The data type returned is a new Observable, Contains screen clicks X and Y Coordinates and current timestamp .

The final output ：