Usage of rxjs mergemap

Be careful ：

• flatMap  yes  mergeMap  Another name for .

• If only one internal subscription can be activated at a time , Please use  switchMap.

• 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 ：