Ngrx effect parallel http call

会有一股神秘感。 提交于 2021-02-17 02:07:34

问题


I have an effect that should call two different APIs (API1 and API2).

Here's the effect

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

Here's the structure of the service

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

However, I have to retrieve additional data from API2 and merge it with the data returned from API1.

I should do that inside the formatDataToKpi1 function.

I would like to know how to run requests in parallel and pass the returned responses to formatDataToKpi1 and do treatment then return to the effect ?


回答1:


You can make use of the forkJoin RxJS operator.

As stated on the documentation,

When all observables complete, emit the last emitted value from each.

This way, when the observables from both requests have been completed, it will be returned, and you can carry out the subsequent operations.

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

    )
  )
);

EDIT: Looks like I have initially misunderstood your question - Was a bit confused by the variable names

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


来源:https://stackoverflow.com/questions/59668456/ngrx-effect-parallel-http-call

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!