[RxJS] Use RxJS concatMap to map and concat high order observables

Like switchMap and mergeMap, concatMap is a shortcut for map() followed by a concatAll(). In this lesson we will explore this RxJS operator and its properties.

const clickObservable = Rx.Observable
.fromEvent(document, 'click');

function performRequest() {
return fetch('https://jsonplaceholder.typicode.com/users/1')
.then(res => res.json());
}

const emailObservable = clickObservable
.concatMap(click => performRequest(),
(click, res) => res.email);

// concatMap = map ... + ... concatAll
// mergeMap
// switchMap

emailObservable
.subscribe(email => console.log(email));

concatMap happens one after the other, the same as mergeAll(1):

const emailObservable = clickObservable
.mergeMap(click => performRequest(),
(click, res) => res.email,
1);

So the main different between switchMap, mergeMap, concatMap are about concurrency...

switchMap: has cancel previous request functionaility.

mergeMap: allows num of concurrency requests

concatMap: the same as mergeAll(1), only allow one request at a time