Angular 2 – Chaining http requests

by

Chaining HTTP requests can be done using flatMap or switchMap operators. Say we want to make three requests where each request depends on the result of previous one:

this.service.firstMethod()
    .flatMap(firstMethodResult => this.service.secondMethod(firstMethodResult))
    .flatMap(secondMethodResult => this.service.thirdMethod(secondMethodResult))
    .subscribe(thirdMethodResult => {
          console.log(thirdMethodResult);
     });

This way you can chain as much interdependent requests you want.

UPDATE:
As of RxJS version 5.5 pipeable operators were introduced and the syntax has slightly changed:

import {switchMap, flatMap} from 'rxjs/operators';

this.service
  .firstMethod()
  .pipe(
    switchMap(firstMethodResult => this.service.secondMethod(firstMethodResult)),
    switchMap(secondMethodResult => this.service.thirdMethod(secondMethodResult))
  )
  .subscribe(thirdMethodResult => {
      console.log(thirdMethodResult);
    });

More Related Contents:

  1. How to do the chain sequence in rxjs
  2. Angular 7 go offline?
  3. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  4. How to get current value of RxJS Subject or Observable?
  5. Using http rest apis with angular 2
  6. BehaviorSubject vs Observable?
  7. Angular 4 Interceptor retry requests after token refresh
  8. How can I close a dropdown on click outside?
  9. Subject vs BehaviorSubject vs ReplaySubject in Angular
  10. angular 2 disable url encoding
  11. Rxjs toPromise() deprecated
  12. How to achieve a debounce service on input keyup event in angular2 with rxjs
  13. How to cancel a subscription in Angular2
  14. What is the difference between Observable and a Subject in rxjs?
  15. How to ‘wait’ for two observables in RxJS
  16. Load JSON content from a local file with http.get() in Angular 2
  17. What is the difference between BehaviorSubject and Observable?
  18. Upgrading to Angular 10 – Fix CommonJS or AMD dependencies can cause optimization bailouts
  19. Property ‘catch’ does not exist on type ‘Observable’
  20. How to implement a global loader in Angular
  21. “Cross origin requests are only supported for HTTP.” error when loading a local file
  22. Angular 2: How to detect changes in an array? (@input property)
  23. Angular 2: import external js file into component
  24. What is #auto attribute here and why it is required
  25. Angular app has to clear cache after new deployment
  26. Nested arrays in Angular 2 reactive forms?
  27. Highlight the search text – angular 2
  28. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  29. Dynamic template in templatURL in angular2
  30. How to download a csv file using PhantomJS

Leave a Comment