3つのHTTPリクエストを正しくフラットマップする方法

Question

私は3つのHTTPリクエストを作り、それぞれのリクエストは他のリクエストに依存しています。現在、私は成功の次のリクエストをしていますが、それは非効率です。私はいくつかの研究を行なったし、私はflatmapを使用すると仮定だが、私が試したいくつかの方法は、API

にHTTPリクエストを行ういけない。これは、私が試したものであることがわかったが、それは何も

を返しません

return this.info.getLastRecord(this.station) 
     .map((res: any) => res.json() 
     .flatMap((info: any) => { 
     return this.info.getQueue(this.lastID) 
      .map((res: any) => { 
      console.log(res.json()); 
      }); 
     })); 

このdoesntの仕事のどちらか

return this.info.getLastRecord(this.station) 
    .map((res: any) => res.json() 
    .flatMap((res: any) => { 
    return this.info.getQueue(this.lastID) 
     .map((res: any) => { 
     console.log(res); 
    }); 
    })); 

これは私が現在のコール

this.getInfoService.getLastRecord(this.station) 
    .subscribe(
    (info) => { 
     console.log("res", info); 
    }, 
    (error: Response) => console.log(error), 
    () => this.getQueue() 
); 

getQueue() { 
    this.info.getQueue(this.lastID) 
    .subscribe(
    (info) => { 
     console.log("getQueue", info); 
    }, 
    (error: Response) => console.log(error), 
    () => this.gHTDG()) 
} 

getHookTypeDieGroup() { 
this.info.getHookTypeDieGroup(this.profileCode) 
    .subscribe(
    (info) => { 
     console.log("GHTDG", info); 
    }, 
    (error: Response) => console.log(error) 
); 
} 

を作ってるんですか

info.service.ts

getLastRecord(station: string): any { 
return this.http.get('http://API.app/getLastRecord/' + station) 
    .map(
    (response: Response) => { 
     return response.json().info; 
    }, 
).share(); 
} 

getQueue(lastID: number): any { 
return this.http.get('http://API.app/getQueue/' + lastID) 
    .map(
    (response: Response) => { 
     return response.json().info; 
    } 
) 
    .share(); 
} 

gHTDG(pCode: string): any { 
return this.http.get('http://API.app/getHTDG/' + pCode) 
    .map(
    (response: Response) => { 
     return response.json().info; 
    } 
).share(); 
} 

Answer 1

あなたが順序でそれらを一緒にチェーンが必要な場合、私はswitchMapがしたいオペレータであると思います。私はあなたのロジック以下の苦労を抱えているが、私はそれがこのようになるでしょうと思う：

this.getInfoService 
    .getLastRecord(this.station) 
    .switchMap(x => this.getQueue(x.(value from getLastRecord call))) 
    .switchMap(x => this.getHookTypeDieGroup(x.(value from getQueue call)) 
    .subscribe(x => { //Do something with final result }); 

各switchMapが前に観察を購読すると、新しいを返すなる脂肪矢印関数になるのフィードます観察可能である。サブスクライブは最終的な観測可能な結果になります。

Example can be found here.

Answer 2

私は、あなたは彼らが連続して完了した後、特定の順序で3つの要求を実行したい場合concatMapは、あなたのための作業になると思います。敵例：私はそれを試みたが、動作するはずドキュメントに従っていない

getLastRecord(station: string): Observable<any> { 
return this.http.get(`http://API.app/getLastRecord/${station}`) 
    .map(response => response.json().info) 
    .catch(//handle error); 
} 

getQueue(lastID: number): Observable<any> { 
return this.http.get(`http://API.app/getQueue/${lastID}`) 
    .map(r=> r.json().info) 
    .catch(//handle error); 
} 

gHTDG(pCode: string): Observable<any> { 
return this.http.get(`http://API.app/getHTDG/${pCode}`) 
    .map(response => response.json().info); 
    .catch(//handle error) 
} 

concatenatedRequest(station: string): Observable<any>{ 
    return this.getLastRecord(station) 
.concatMap(lastRecord=> this.getQueue(lastRecord.id))//lastRecord is the result from the previous getLastRecord request 
.concatMap(queueData => this.gHTDG(queueData.pCode))//queueData is the result of the previous getQueue request 
.catch(//handle error); 
} 

：D オペレータについての詳細情報については、私はplnkrを作成し、答えに追加して、次のlink