Объедините 3 потока с наблюдаемыми последовательно и параллельно


Я пытаюсь объединить 3 HTTP-запроса в 1 ответ.

Последние 2 запроса зависят от данных из первого запроса. Я выбрал следующий подход, используя 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)
    )
  }

Приведенный выше метод возвращает следующий ответ, когда подписка:

Введите описание изображения здесь

Ответ, который я пытаюсь получить, должен быть примерно таким:

{
  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 возвращаются как наблюдаемые вместо ответов.

Можно ли "развернуть" 2 Obseravbles перед возвращением ответа, чтобы я мог сопоставить данные?

Вот stackblitz кода, как он написан в настоящее время. Вы можете проверить консоль средств разработки, чтобы увидеть ответ.

2 2

2 ответа:

В вашем классе ErgastService строки 24 и 30 возвращают массив наблюдаемых объектов вместо их содержимого.

Быстрое решение-добавить два раздвоенных соединения, как я делаю в этой раздвоенной версии https://stackblitz.com/edit/angular-l3wkmw?file=src/app/api.service.ts

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

Создает наблюдаемое из наблюдаемых. Используйте flatMap вместо map, тогда вы получите наблюдаемое, которое излучает значение.