Ngrx效果并行http调用

debugcn 发表于 Dev

信息开发

我的效果是应该调用两个不同的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，然后进行处理然后返回效果？

wentjun

您可以使用forkJoinRxJS运算符。

如文档中所述，

当所有可观测值完成时，从每个可观测值发出最后一个发出的值。

这样，当两个请求的可观察值都完成时，它将被返回，并且您可以执行后续操作。

$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);
    })
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。