Угловая 2: Используйте результаты одного вызова http, чтобы сделать еще

Question

Я хочу найти рабочие элементы для данной команды. Это должно произойти в два этапа:

• RETRIEVE рабочий список, который был создан для этой команды
• Получить рабочие элементы, которые прикреплены к этому рабочему списку

Это, как я получаю рабочий список:

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

Этот оператор позволяет подключить другой запрос, когда первый один завершает в асинхронном потоке данных.