Объедините 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 ответа:
В вашем классе ErgastService строки 24 и 30 возвращают массив наблюдаемых объектов вместо их содержимого.
Быстрое решение-добавить два раздвоенных соединения, как я делаю в этой раздвоенной версии https://stackblitz.com/edit/angular-l3wkmw?file=src/app/api.service.ts