Rxjs - handling multiple requests and subtle differences of respective operators and higher order observable

OPTION 1:  PARALLEL

You might use forkJoin or mergeMap.

1) forkJoin([observable 1, observable 2]): can only trigger if ALL observable completed. Input can be array or object of an observable.

=> Perfect if you have a couple number of HTTP requests or any kind of asynchronous operations. It works like Promise.all([]).

Demo here: 

Multiple request with mergeMap (see explanation below)

OPTION 2: SEQUENTIAL

concatMap (triggered by order)

 

some other combination operators: 

1) combineLatest([observable1, observable2]): just works without caring about the completion of streams. Input can be array or object of observable. It will be trigger if ONE of the streams emitting new value.

2) zip([observable1, observable2, observablen...]): Combine each corresponding data from different streams into one object/array.

See https://stackblitz.com/edit/typescript-5az27c?devtoolsheight=100&file=index.ts

3) concat 

Combine different observable one by after completion IN ORDER.

4) merge

Combine different observable and emit NOT IN ORDER

5) race : Reset the "circle" of emission each time it is completed.

6) withLatestForm (operator)

RxJS Higher Order Observables (HOOs):

(Receive Outer Observable ==> Emit/Return Inner Observable)

7) switchMap, mergeMap, concatMap, exhaustMap

switchMap    = switchAll + map

mergeMap    = mergeAll + map

concatMap    = concatAll + map

exhaustMap  = exhaustAll + map

Using these HOO, you don't have to use nested subscribe when you use nested observable.

- switchMap cancels previous HTTP requests that are still in progress, while mergeMap lets all of them finish.

- concatMap does not subscribe to the next observable until the previous completes

- exhaustMap:  ignore other values until that observable completes.

Note: FlatMap is an alias of mergeMap

Example 1:  example

Example 2:  example 

10 common operators: 

map,  filter, tap, switchMap, concatMap, combineLatest, startWith, distinctUntilChanged, debounceTime,  catchError

Source: https://www.youtube.com/watch?v=Byttv3YpjQk&ab_channel=JoshuaMorony

References:

https://blog.angular-university.io/rxjs-higher-order-mapping/

https://riptutorial.com/rxjs/example/27973/sending-multiple-parallel-http-requests

https://indepth.dev/reference/rxjs/operators/merge-map

https://vdsabev.medium.com/the-simple-difference-between-rxjs-switchmap-and-mergemap-397c311552a5#

https://luukgruijs.medium.com/understanding-rxjs-map-mergemap-switchmap-and-concatmap-833fc1fb09ff#

https://www.youtube.com/playlist?list=PLxnmNhAZjt7y9u9xum0SIvz1_p09AP019

https://www.youtube.com/watch?v=qYdKmYp95Jg&ab_channel=DecodedFrontend

https://www.youtube.com/watch?v=qChj6nScvl0&ab_channel=ChauTran

https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day025-rxjs-hoo-utility.md

https://www.youtube.com/watch?v=Byttv3YpjQk&ab_channel=JoshuaMorony

https://rxmarbles.com/

https://www.youtube.com/watch?v=ak3MvMn8u18