将 3 个流与 Observables 串联和并行组合

Question

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

最后 2 个请求取决于第一个请求的数据。在阅读 this post.

后，我使用 flatMap 和 forkJoin 选择了以下方法

作者使用的是旧版本的 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)
    )
  }

以上方法return订阅时回复如下：

我想要得到的响应应该更像这样：

{
  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

testRaces 和 standings 被 return 编辑为 Observables 而不是响应。

是否可以在 return 响应之前 "unwrap" 2 个 Obseravbles，以便我可以映射数据？

Here is a stackblitz 当前编写的代码。您可以检查开发工具控制台以查看响应。

Answer 1

在您的 class ErgastService 中，第 24 行和第 30 行返回一个可观察对象数组而不是它们的内容。

快速解决方案是像我在这个分叉版本中所做的那样添加两个 forkJoin https://stackblitz.com/edit/angular-l3wkmw?file=src/app/api.service.ts

Answer 2

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

创建可观察对象的可观察对象。使用 flatMap 而不是 map，然后你会得到一个发出值的 observable。

将 3 个流与 Observables 串联和并行组合

Combine 3 streams with Observables in series and in parallel

javascript

observable

rxjs

angular-http

angular