Angular – Make multiple HTTP calls sequentially

by

This can be achieved using the switchMap operator. This example uses RxJS 5.5+ pipeable operators.

import { switchMap } from 'rxjs/operators';

registerUser(user: User) {
  return this.utility.getIpAddress().pipe(
    switchMap(data => {
      this.ipAddress = data.ip;

      const body = {
        UserName: user.UserName,
        Email: user.Email,
        UserIP: this.ipAddress,
      };

      return this.http.post(this.registerAPI, body);
    })
  )
}

RxJS < 5.5:

import { switchMap } from 'rxjs/operators';

registerUser(user: User) {
  return this.utility.getIpAddress()
    .switchMap(data => {
      this.ipAddress = data.ip;

      const body = {
        UserName: user.UserName,
        Email: user.Email,
        UserIP: this.ipAddress,
      };

      return this.http.post(this.registerAPI, body);
    });
}

More Related Contents:

  1. async/await in Angular `ngOnInit`
  2. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  3. How can I create an observable with a delay
  4. Merging http observables using forkjoin
  5. How to return observable from subscribe
  6. How to return value inside subscribe Angular 4
  7. How do I share data between components in Angular 2?
  8. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  9. Ionic 2 Form goes up when keyboard shows
  10. When to use square brackets [ ] in directives @Inputs and when not?
  11. Angular2 – Interaction between components using a service
  12. Reactive forms – disabled attribute
  13. How to implement sleep function in TypeScript?
  14. Testing error case with observables in services
  15. Build Angular2 HTML and TypeScript to a single file
  16. angular keyvalue pipe sort properties / iterate in order
  17. Angular subscribe elegant
  18. How to allow access outside localhost
  19. Pass parameter into route guard
  20. Typescript dependency injection public vs private
  21. Rxjs Retry with Delay function
  22. What is the meaning of question mark in expressions in Angular 2?
  23. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  24. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  25. How to mock Angular 4.3 httpClient an error response in testing
  26. Angular 2 creating reactive forms with nested components
  27. Limit input field to two decimal places – Angular 5
  28. Angular 6 – how to mock router.events url response in unit test
  29. How to create and download text/Json File with dynamic content using angular 2+
  30. Angular4 Load external html page in a div

Leave a Comment