Angular 2：使用一個http調用的結果做另一個

Question

我想找到給定團隊的工作項目。這需要兩個步驟發生：

• 檢索是爲那支球隊
• 檢索連接到工作列表

這是我得到的工作列表的工作項目所產生的工作列表：

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

這個操作符允許將另一請求時，第一個完成到異步數據流。