Angular - Make multiple HTTP calls sequentially

Question

I need to make a function to make HTTP calls sequentially inorder to use response of one call into other one like getting IP address of user from first call and use that IP to register user in second call.

Demo code:

registerUser(user: User) {
    this.utility.getIpAddress()
    .subscribe(data => {
        this.ipAddress = data.ip;
    });
    const body = {
        UserName: user.UserName,
        Email: user.Email,
        //...
        UserIP: this.ipAddress,
    }
    return this.http.post(this.registerAPI, body);
}

@HereticMonkey I can't seem to understand the solution from that question. My case is a little different, as I needed to make first html call wait for it to complete, use the data from response and then make the next http call and return the observable. SwitchMap seems to work for me rather than MergeMap opposed to that question's solution as SwitchMap does not send in parallel, it map to observable, complete previous inner observable, emit values. — Abdul Rafay
– Abdul Rafay, Commented Jul 6, 2018 at 15:55

Kostas Nitaf · Accepted Answer · 2023-06-20 08:31:51Z

29

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);
    });
}

edited Jun 20, 2023 at 8:31

Kostas Nitaf

1,0551 gold badge11 silver badges31 bronze badges

answered Jul 6, 2018 at 14:40

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Alexander Staroselsky Over a year ago

switchMap does not send in parallel, it "Map to observable, complete previous inner observable, emit values". It waits for inner getIpAddress() to complete before executing body.

Ashish Ranjan Over a year ago

Sorry, I didn't see the question properly, also deleted my comment.. :D

Abdul Rafay Over a year ago

@AlexanderStaroselsky I'm getting this error while trying to subscribe to returned observable from "registerUser()": this.userService.registerUser(form.value) .subscribe((data) => console.log(data)); error TS2339: Property 'subscribe' does not exist on type 'void'

Alexander Staroselsky Over a year ago

My answer depends on your version of RxJS. It's line with current Angular documentation. If you are using an older version of RxJS, this may not work for you. I can provide an example using an older version.

Ashish Ranjan Over a year ago

@AlexanderStaroselsky: Pardon my naiveness, but woudn't a return with this.utility.getIpAddress() sove the issue?

|

Collectives™ on Stack Overflow

Angular - Make multiple HTTP calls sequentially

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related