ββββ
Example 1: Demonstrating the difference between concatMap and mergeMap
( StackBlitz )
π‘ Note the difference between concatMap
and mergeMap
. Because concatMap
does not subscribe to the next observable until the previous completes, the value from the source delayed by 2000ms will be emitted first. Contrast this with mergeMap
which subscribes immediately to inner observables, the observable with the lesser delay (1000ms) will emit, followed by the observable which takes 2000ms to complete.
// RxJS v6+import { of } from 'rxjs';import { concatMap, delay, mergeMap } from 'rxjs/operators';β//emit delay valueconst source = of(2000, 1000);// map value from source into inner observable, when complete emit result and move to nextconst example = source.pipe(concatMap(val => of(`Delayed by: ${val}ms`).pipe(delay(val))));//output: With concatMap: Delayed by: 2000ms, With concatMap: Delayed by: 1000msconst subscribe = example.subscribe(val =>console.log(`With concatMap: ${val}`));β// showing the difference between concatMap and mergeMapconst mergeMapExample = source.pipe(// just so we can log this after the first example has rundelay(5000),mergeMap(val => of(`Delayed by: ${val}ms`).pipe(delay(val)))).subscribe(val => console.log(`With mergeMap: ${val}`));
Example 2: Map to promise
( StackBlitz | jsBin | jsFiddle )
// RxJS v6+import { of } from 'rxjs';import { concatMap } from 'rxjs/operators';β//emit 'Hello' and 'Goodbye'const source = of('Hello', 'Goodbye');//example with promiseconst examplePromise = val => new Promise(resolve => resolve(`${val} World!`));// map value from source into inner observable, when complete emit result and move to nextconst example = source.pipe(concatMap(val => examplePromise(val)));//output: 'Example w/ Promise: 'Hello World', Example w/ Promise: 'Goodbye World'const subscribe = example.subscribe(val =>console.log('Example w/ Promise:', val));
Example 3: Supplying a projection function
( StackBlitz | jsBin | jsFiddle )
// RxJS v6+import { of } from 'rxjs';import { concatMap } from 'rxjs/operators';β//emit 'Hello' and 'Goodbye'const source = of('Hello', 'Goodbye');//example with promiseconst examplePromise = val => new Promise(resolve => resolve(`${val} World!`));//result of first param passed to second param selector function before being returnedconst example = source.pipe(concatMap(val => examplePromise(val),result => `${result} w/ selector!`));//output: 'Example w/ Selector: 'Hello w/ Selector', Example w/ Selector: 'Goodbye w/ Selector'const subscribe = example.subscribe(val =>console.log('Example w/ Selector:', val));
βconcatMap π° - Official docs
βUse RxJS concatMap to map and concat higher order observablesβ
π₯ π΅ - AndrΓ© Staltz
βBuild your own concatMap operatorβ
π₯ - Kwinten Pisman
π Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/concatMap.tsβ