如何正确平面映射三个HTTP请求

Question

我有一个应用程序可以创建3个HTTP请求，并且每个请求都依赖于来自其他人的信息。目前，我正在提出下一个成功的请求，但效率不高。我做了一些研究，发现我假设使用flatmap是，但我已经试过几个方法不使HTTP请求的API

这是我做过尝试，但它没有返回

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()); 
      }); 
     })); 

这不工作或者

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

我觉得concatMap将是你的运营商，如果你想在一个特定的顺序后，他们连续完成执行3个请求。敌人例如：

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