角2：あるhttp呼び出しの結果を使って別の応答を行う

Question

特定のチームの作業項目を探したい。

• そのチーム
• これは私がワークリストを取得する方法であるワークリスト

に添付されている作業項目を取得するために生成されたワークリストを取得します。これは、2つのステップで発生する必要があります。

WorklistService.ts

public getByTeamId(teamId): Observable<Worklist> { 
    return this._http 
     .get(url + "/" + teamId) 
     .map(res => res.json().data as Worklist) 
     .catch(this.handleError); 
} 

その後、私のコンポーネントで、私はこれらの呼び出しを何とかチェーンに必要と思い

WorkItemService.ts

public getByWorklistId(worklistId): Observable<WorkItem[]> { 
    return this._http 
     .get(url + "/" + worklistId) 
     .map(res => res.json().data as WorkItem[]) 
     .catch(this.handleError); 
} 

：

そして、ここでは、私はそのリストに添付されている作業項目を取得する方法です。ここでは、私がこれまで持っているものです。

this._worklistService 
    .getByTeamId(teamId) 
    .subscribe(
     worklist => { 
      if (worklist) { 
       this._workItemService 
        .getByWorklistId(worklist._id)      
        .subscribe(
         workItems => this.workItems = workItems, 
         error => console.log("Could not retrieve work items")); 
      } 
     }, 
     error => console.log("Could not retrieve worklist")); 

は、これは本当に、これらの呼び出しチェーンするための最良の方法ですまたはよりエレガントな方法は何ですか？

Answer 1

あなたはそれを行うためのflatMapオペレータを活用できます。

this._worklistService 
    .getByTeamId(teamId) 
    .flatMap(
     worklist => { 
     if (worklist) { 
      return this._workItemService 
       .getByWorklistId(worklist._id); 
     } else { 
      return Observable.throw('worklist is undefined'); 
     } 
     }) 
    .subscribe(
     workItems => this.workItems = workItems, 
     error => console.log("Could not retrieve work items")); 

この演算子は、最初のものは、非同期データフローに完了した別の要求をプラグインすることができます。