Ngrx 效果並行 http 調用

Question

我有一個應該調用兩個不同 API（API1 和 API2）的效果。

這是效果

$LoadKpiMission = createEffect(() =>
  this.actions$.pipe(
    ofType<any>(EKpiActions.GetMissionsByStation),
    mergeMap(action =>
      this.apiCallsService.getKpi(action.payload, '2016-04-18').pipe(
        map(trips => ({ type: EKpiActions.GetMissionsSuccess, payload: trips })),
        catchError(() => EMPTY)
      )
    )
  )
);

這是服務的結構

getKpi(station: number, date: string) {
  let Kpi = `http://192.168.208.25:8998/api/scheduling/circulation_by_date_and_station?orig=${station}&date=${date}`;
  return this.http.get<ISchedules>(API1).pipe(
    map(data => {
      return this.formatDataToKpi1(data);
    })
  );
}

但是，我必須從API2檢索其他數據並將其與從API1返回的數據合並。

我應該在formatDataToKpi1函數中這樣做。

我想知道如何並行運行請求並將返回的響應傳遞給formatDataToKpi1並進行處理然后返回效果？

Answer 1

您可以使用forkJoin RxJS 運算符。

如文檔所述，

當所有 observable 完成后，從每個 observable 發出最后發出的值。

這樣，當兩個請求的 observables 都完成后，它就會被返回，你就可以進行后續的操作了。

$LoadKpiMission = createEffect(() =>
  this.actions$.pipe(
    ofType<any>(EKpiActions.GetMissionsByStation),
    mergeMap(action =>
      const getKpi = this.apiCallsService.getKpi(action.payload, '2016-04-18');
      const getKpi2 = this.apiCallsService.getKpi2();

      forkJoin(getKpi, getKpi2).subscribe(([res1, res2] => {
        // do the rest here
      });

    )
  )
);

---

編輯：看起來我最初誤解了你的問題 - 對變量名稱有點困惑

getKpi(station: number, date: string) {
  let Kpi = `http://192.168.208.25:8998/api/scheduling/circulation_by_date_and_station?orig=${station}&date=${date}`;

  const api1 = this.http.get<ISchedules>(API1);
  const api2 = this.http.get<ISchedules>(API2);

  return forkJoin(api1, api2).pipe(
    map(data => {
      return this.formatDataToKpi1(data);
    })
  );
}