将3个流与Observables串联并行并联

时间:2018-06-07 10:44:03

标签: javascript angular rxjs observable angular-http

我正在尝试将3个HTTP请求合并为1个响应。

最后2个请求取决于第一个请求的数据。在阅读this post后,我使用flatMapforkJoin选择了以下方法。

作者正在使用旧版本的Angular和RXjs,所以我修改了它以使用管道运算符。但我仍然无法得到我需要的回应。

  public getAllData(params): Observable<any> {
    return this.http.get<any>(`${this.base}/seasons.json`, {params: params})
    .pipe(
      map((data: SeasonBase) => data.MRData.SeasonTable.Seasons),
      flatMap((seasons: Season[]) => {
        if(seasons.length > 0) {
          return forkJoin(
            of(seasons),
            seasons.map((season: Season) => {
              return this.http.get(`${this.base}/${season.season}/results/1.json`)
                .pipe(
                  map((data: RaceBase) => data.MRData.RaceTable)
                )
            }),
            seasons.map((season: Season) => {
              return this.http.get(`${this.base}/${season.season}/driverStandings.json`)
                .pipe(
                  map((d: any) => d.MRData.StandingsTable.StandingsLists[0])
                )
            })
          ).pipe(
            map((data: any) => {
              let season = data[0];
              let races = data[1];
              let standings = data[2];
              season.testRaces = races;
              season.standings = standings;
              return season;
            })
          )
        }
      }),
      catchError(this.handleError)
    )
  }

以上方法在订阅时返回以下响应:

enter image description here

我想要得到的回应应该更像这样:

{
  season: "1950", 
  url: "http://en.wikipedia.org/wiki/1950_Formula_One_season",
  testRaces: [test_races_data], // dont want observable
  standings: [standings_data] // dont want observable
},
{...},
{...}
etc

testRacesstandings作为Observables而非响应返回。

是否可以&#34;展开&#34;返回响应之前的2 Obseravbles,以便我可以映射数据?

目前编写的代码的

Here is a stackblitz。您可以查看开发工具控制台以查看响应。

2 个答案:

答案 0 :(得分:0)

在你的类ErgastService中,第24行和第30行返回一个observables数组,而不是它们的内容。

快速解决方案是在此分叉版https://stackblitz.com/edit/angular-l3wkmw?file=src/app/api.service.ts中添加两个forkJoin

答案 1 :(得分:0)

seasons.map((season: Season) => {
          return this.http.get(`${this.base}/${season.season}/results/1.json`)

创建一个可观察的可观察对象。使用flatMap代替map,然后您会获得一个可以发出值的观察值。