Angular - Effectuer plusieurs appels HTTP de manière séquentielle

Question

Je dois créer une fonction pour effectuer des appels HTTP séquentiels afin d'utiliser la réponse d'un appel à un autre, comme obtenir l'adresse IP de l'utilisateur dès le premier appel et utiliser cette adresse IP pour enregistrer l'utilisateur lors du deuxième appel.

Code de démonstration:

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

Answer 1

Ceci peut être réalisé en utilisant l'opérateur switchMap . Cet exemple utilise des opérateurs pipés RxJS 5.5+.

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

J'espère que ça aide!