Angular 2:最初のサービスの成功に対する2つのバックエンドサービス呼び出し

Angular 2: Two backend service calls on success of first service


質問 written by Antikhippe @2017-10-31 23:11:51Z

: 15 : 1 : 3

私のAngular 2アプリでは、以下のようなバックエンドサービスを利用できます。

getUserInterests() {
    return this.http.get('http://localhost:8080/test/selections').map((res: Response) => res.json());
}

このサービスを呼び出した後、前のサービスの成功時に別のサービスを呼び出したいと思います。

第二サービス

let params: URLSearchParams = new URLSearchParams();
    params.set('access_token', localStorage.getItem('access_token'));
    return this.http.get('http://localhost:8080/user/selections', { search: params }).map((res: Response) => res.json());

これら2つのサービスは別々に2つのJSON配列を返します。 それから私はこれら二つの配列でログインをする必要があります。

編集済み

service.ts

getUserInterests() {
    return this.http.get('http://localhost:8080/test/selections').map((res: Response) => res.json());
}

getSavedSelections() {
    let params: URLSearchParams = new URLSearchParams();
    params.set('access_token', localStorage.getItem('access_token'));
    return this.http.get('http://localhost:8080/interest/user/selections', { search: params }).map((res: Response) => res.json());
}

getSelectionList() {
    var obs = this.getUserInterests().flatMap(
        (interests) => {
            return Observable.forkJoin([
                Observable.of(interests),
                this.getSavedSelections()
            ]);
        }
    );
    return obs;
}

それから私はサービスを呼び出すために私の他のtsファイルで以下を使っています。

export class InterestsComponent {
  private interests;
  private saved_interests;
  constructor(private dataService: DataService) {
    this.dataService.getSelectionList().subscribe(
        (result) => {
            var interests = result[0];
            var selections = result[1];
        }
    );
  }
}

しかし、これはコンソールログに以下のエラーを与えます。

ORIGINAL EXCEPTION: TypeError: this.dataService.getSelectionList is not a function

任意の提案は大歓迎です。

回答 1 written by Thierry Templier @2016-04-19 08:29:16Z
17

前のリクエストが完了した後にflatMap演算子を使用して1つのリクエストを呼び出す必要があります。

this.service.getUserInterests().flatMap(
  (interests) => {
    let params: URLSearchParams = new URLSearchParams();
    params.set('access_token', localStorage.getItem('access_token'));
    return this.http.get('http://localhost:8080/user/selections', {
      search: params
    }).map((res: Response) => res.json());
  }
);

このデータフローを購読するとき、あなたは最後のリクエストの結果だけを受け取るでしょう。

Observable.forkJoinメソッドを使用して両方を返すことができます。 これがサンプルです:

You could use the Observable.forkJoin method to return both. Here is a sample:

コメント 1

興味は何ですか?

written by Rose18 @2016-04-19 08:28:24Z

コメント 2

2つのサービスからの回答を得るにはどうすればいいですか?

written by Rose18 @2016-04-19 08:28:58Z

コメント 3

interestsは最初のリクエストの結果に対応します。

written by ティエリー・テンプリエ @2016-04-19 08:29:55Z

コメント 4

購読コールバックで2つのリクエストの結果を取得する方法を説明するために回答を更新しました...

written by Thierry Templier 2016 @2016-04-19 08:30:25Z

コメント 5

2番目のコードスニペットを使用できますよね。

written by Rose18 @2016-04-19 08:36:07Z