web-dev-qa-db-ja.com

Angular-複数のHTTP呼び出しを順番に行う

最初の呼び出しからユーザーのIPアドレスを取得し、そのIPを使用して2番目の呼び出しでユーザーを登録するなど、1つの呼び出しの応答を他の呼び出しに応答するために、HTTP呼び出しを連続して行う関数を作成する必要があります。

デモコード：

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);
}
angulartypescriptobservable
14
Abdul Rafay

これは、 switchMap 演算子を使用して実現できます。この例では、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);
    });
}

うまくいけばそれが助けてくれます！

14
Alexander Staroselsky