How can I chain HTTP calls in Angular 2?

by

You can do this using the mergeMap operator.

Angular 4.3+ (using HttpClientModule) and RxJS 6+

import { mergeMap } from 'rxjs/operators';

this.http.get('./customer.json').pipe(
  mergeMap(customer => this.http.get(customer.contractUrl))
).subscribe(res => this.contract = res);

Angular < 4.3 (using HttpModule) and RxJS < 5.5

Import the operators map and mergeMap, then you can chain two calls as follows:

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap';

this.http.get('./customer.json')
  .map((res: Response) => res.json())
  .mergeMap(customer => this.http.get(customer.contractUrl))
  .map((res: Response) => res.json())
  .subscribe(res => this.contract = res);

Some more details here: http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

More information about the mergeMap operator can be found here

More Related Contents:

  1. How to pass url arguments (query string) to a HTTP request on Angular?
  2. How to catch exception correctly from http.request()?
  3. What is httpinterceptor equivalent in angular2?
  4. Angular2 http.get() ,map(), subscribe() and observable pattern – basic understanding
  5. How to correctly set Http Request Header in Angular 2
  6. How to use angular2 http API for tracking upload/download progress
  7. Angular2 OPTIONS method sent when asking for http.GET [duplicate]
  8. Angular2 / Error: Collection not found
  9. How to cancel a HTTPRequest in Angular 2?
  10. How to idiomatically log auth information with middleware
  11. REST HTTP status codes for failed validation or invalid duplicate
  12. How to $http Synchronous call with AngularJS
  13. How do multiple clients connect simultaneously to one port, say 80, on a server? [duplicate]
  14. Can HTTP POST be limitless?
  15. HTTP test server accepting GET/POST requests
  16. HTTP GET in VBS
  17. URL: Username with @
  18. angular 2 disable url encoding
  19. How to send password securely over HTTP?
  20. Why can’t browser send gzip request?
  21. What is the “realm” in basic authentication
  22. How does “304 Not Modified” work exactly?
  23. Process Management for the Go Webserver
  24. Does HTTP use UDP?
  25. What is Cache-Control: private?
  26. Custom HTTP Authorization Header
  27. How to send line break with curl?
  28. Multiple HTTP Authorization headers?
  29. nginx upload client_max_body_size issue
  30. “Cannot GET /” with Connect on Node.js

Leave a Comment