mergeMap

연산자(operator) 정의: mergeMap(project: function: Observable, resultSelector: function: any, concurrent: number): Observable

Map to observable, emit values.

flatMap is an alias for mergeMap!

If only one inner subscription should be active at a time, try switchMap!

If the order of emission and subscription of inner observables is important, try concatMap!

Examples

Example 1: mergeMap with observable

( jsBin | jsFiddle )

//emit 'Hello'
const source = Rx.Observable.of('Hello');
//map to inner observable and flatten
const example = source.mergeMap(val => Rx.Observable.of(`${val} World!`));
//output: 'Hello World!'
const subscribe = example.subscribe(val => console.log(val));

Example 2: mergeMap with promise

( jsBin | jsFiddle )

//emit 'Hello'
const source = Rx.Observable.of('Hello');
//mergeMap also emits result of promise
const myPromise = val => new Promise(resolve => resolve(`${val} World From Promise!`));
//map to promise and emit result
const example = source.mergeMap(val => myPromise(val));
//output: 'Hello World From Promise'
const subscribe = example.subscribe(val => console.log(val));

Example 3: mergeMap with resultSelector

( jsBin | jsFiddle )

/*
  you can also supply a second argument which receives the source value and emitted
  value of inner observable or promise
*/
//emit 'Hello'
const source = Rx.Observable.of('Hello');
//mergeMap also emits result of promise
const myPromise = val => new Promise(resolve => resolve(`${val} World From Promise!`));
const example = source
  .mergeMap(val => myPromise(val), 
    (valueFromSource, valueFromPromise) => {
      return `Source: ${valueFromSource}, Promise: ${valueFromPromise}`;
});
//output: "Source: Hello, Promise: Hello World From Promise!"
const subscribe = example.subscribe(val => console.log(val));

Example 4: mergeMap with concurrent value

( jsBin | jsFiddle )

//emit value every 1s
const source = Rx.Observable.interval(1000);

const example = source.mergeMap(
    //project
    val => Rx.Observable.interval(5000).take(2),
  //resultSelector
  (oVal, iVal, oIndex, iIndex) => [oIndex, oVal, iIndex, iVal],
  //concurrent
  2 
);
/*
        Output:
        [0, 0, 0, 0] <--1st inner observable
        [1, 1, 0, 0] <--2nd inner observable
        [0, 0, 1, 1] <--1st inner observable
        [1, 1, 1, 1] <--2nd inner observable
        [2, 2, 0, 0] <--3rd inner observable
        [3, 3, 0, 0] <--4th inner observable
*/
const subscribe = example.subscribe(val => console.log(val));

Additional Resources

• mergeMap - Official docs
• map vs flatMap - Ben Lesh
• Async requests and responses in RxJS - André Staltz
• Use RxJS mergeMap to map and merge higher order observables - André Staltz
• Use RxJS mergeMap for fine grain custom behavior - André Staltz

Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/operator/mergeMap.ts