Avoiding nesting subscriptions in Angular 2+?

by

Avoiding nested subscriptions depends on the nature of the observables and how they depend on each other:

Co-dependent observables

When an observable (this.grants.get()) depends on the notification from another observable (this.user), you could use any of the RxJS higher order mapping operators switchMap, mergeMap, concatMap and exhaustMap. Each has their own purpose. You could find the differences between them here.

Brief differences b/n them

  • switchMap – cancel inner observable if the outer observable emits
  • mergeMap – trigger inner observable for each outer notification (flatten the outer notifications)
  • concatMap – essentially mergeMap with single concurrent request at any time (flattens the outer notifications but emit them in order)
  • exhaustMap – ignore outer notifications if inner observable hasn’t completed

Illustration using switchMap operator

this.user.pipe(
  switchMap(e => this.grants.get(e))
).subscribe((x) => {
  console.log(x)
});

Independent observables

If the observables are independent of each other, you could use RxJS functions like forkJoin, combineLatest or zip to trigger the observables in parallel.

Brief differences b/n them

  • forkJoinα – emit only when all the observables complete
  • combineLatestα,β – emit when any of the observables emit (observables w/o emissions will emit old value)
  • zipα,β – emit when all of the observables emit

Illustration using forkJoin

forkJoin(this.obs1, this.obs2, ...).subscribe(
  res => console.log(res)
);

α – emits an array of notifications from each observable (eg. (this.obs1, this.obs2, ...) will emit ['res from obs1', 'res from obs2', ...]).

β – all observables should emit atleast once for the operator to emit

More Related Contents:

  1. What is the difference between Promises and Observables?
  2. What is the difference between Subject and BehaviorSubject?
  3. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  4. Observable type error: cannot read property of undefined
  5. take(1) vs first()
  6. RxJS: takeUntil() Angular component’s ngOnDestroy()
  7. Angular Subscribe within Subscribe
  8. How to create an RXjs RetryWhen with delay and limit on tries
  9. Handling refresh tokens using rxjs
  10. Best way to “flatten” an array inside an RxJS Observable
  11. How to make an http call every 2 minutes with RXJS?
  12. Angular 7 – nesting Observables
  13. Angular subscribe elegant
  14. Making sure observables in for loop are all finished before executing other code
  15. Best way to import Observable from rxjs
  16. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  17. fromPromise does not exist on type Observable
  18. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  19. Rxjs Retry with Delay function
  20. How to make nested Observable calls in Angular2
  21. tap() isn’t triggered in RXJS Pipe
  22. How to return observable from subscribe
  23. Property ‘toPromise’ does not exist on type ‘Observable’
  24. How to return value inside subscribe Angular 4
  25. How to receive blob responses using Angular’s 2+ @angular/http module?
  26. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  27. FormControl.detectchanges – why use distinctUntilChanged?
  28. How to send 1000 XHTTP Requests with maximum number of parallel requests
  29. How to pass results between chained observables
  30. Do we need to unsubscribe from observable that completes/errors-out?

Leave a Comment