服务器上取消了多个API调用

Question

I am using Angular7 and NGRX, and a server in GO.

I have the following code in my ngrx effect =>

  //#region OPEN CHANNELS
  @Effect()
  getUAVsSuccess$ = this.actions$.pipe(
    ofType<featureActions.GetUAVsSuccess>(featureActions.ActionTypes.GetUAVsSuccess),
    concatMap(action =>
      of(action).pipe(
        withLatestFrom(this.store$.pipe(select(featureSelectors.selectAll))),
        withLatestFrom(this.store$.pipe(select(OrganizationStoreSelectors.selectedOrganizationId))),
        withLatestFrom(this.store$.pipe(select(ProjectsStoreSelectors.selectedProjectId)))
      )
    ),
    switchMap(([[[action, drones], organizationId], projectId]) => {
      const actions = [];
      drones.forEach((drone) => {
        actions.push(
          new featureActions.OpenUAVUpdatePositionChannelRequest({ uavId: drone.uavId, projectId, organizationId }),
          new featureActions.OpenUAVUpdateStatusChannelRequest({ uavId: drone.uavId, projectId, organizationId }),
          new featureActions.GetUAVCurrentMissionRequest({uavId: drone.uavId})
        );
      });
      return actions;
    }),
  );

Basically, this will open 2 channels, and then get a mission.

the last action, will dispatch another effect

  @Effect()
  getCurrentMission$ = this.actions$.pipe(
    ofType<featureActions.GetUAVCurrentMissionRequest>(featureActions.ActionTypes.GetUAVCurrentMissionRequest),
    switchMap((action) =>
      this.dataService.getCurrentMission(action.payload).pipe(
        switchMap(response => [
          new featureActions.GetUAVCurrentMissionSuccess({uavId : action.payload.uavId, missionHandler : response.identifier}),
          new MissionsStoreActions.GetMissionUAVRequest({uavId : action.payload.uavId, missionHandler : response.identifier})
        ]),
        catchError((error: HttpErrorResponse) => {
          this.snackBar.open(this.translate.instant('ERROR.HTTP.DRONE.NOT_UPDATABLE', {message: error.message}), this.translate.instant('BUTTON.OK'), {duration: 2500});
          return of(new featureActions.GetUAVCurrentMissionFailed({error}));
        }),
      )
    )
  ); 

that, using an api call getCurrentMission

will ask the server the mission

  getCurrentMission(params: {uavId: number}): Observable<apiModels.GetMissionHandleResponse> {
    return this.httpClient.get<any>(`${environment.API_URL}/mission/get_mission_handle_uav?uavID=${params.uavId}`);
  }

Now, the problem I face is. If I loaded 4 drones, I will have 12 calls in total. and this last get call get canceled because it's like asked 3 times in a short time.

I do not understand exactly what is causing this. the server do get the call retrieve the data ( I added log just before sending a response), and send the response, but the call is canceled on the browser, so my flow of ngrx init call is broke. Only one call at the time is accepted

What could be the issues ?

EDIT : I also try running a series of test on postman, by calling 5 times the same endpoint with no delay, and it worked. So I guess something in ngrx or chrome is cancelling my calls ?

Answer 1

You are using switchMap so

The main difference between switchMap and other flattening operators is the cancelling effect. On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed (if new emitted value emit fast enough).

You can remember this by the phrase switch to a new observable

So I would suggest you change the code like this

  @Effect()
  getCurrentMission$ = this.actions$.pipe(
    ofType<featureActions.GetUAVCurrentMissionRequest>(featureActions.ActionTypes.GetUAVCurrentMissionRequest),
    mergeMap((action) => // here
      this.dataService.getCurrentMission(action.payload).pipe(
        mergeMap(response => [ // here
          new featureActions.GetUAVCurrentMissionSuccess({uavId : action.payload.uavId, missionHandler : response.identifier}),
          new MissionsStoreActions.GetMissionUAVRequest({uavId : action.payload.uavId, missionHandler : response.identifier})
        ]),
        catchError((error: HttpErrorResponse) => {
          this.snackBar.open(this.translate.instant('ERROR.HTTP.DRONE.NOT_UPDATABLE', {message: error.message}), this.translate.instant('BUTTON.OK'), {duration: 2500});
          return of(new featureActions.GetUAVCurrentMissionFailed({error}));
        }),
      )
    )
  );

or using exhaustMap

@Effect()
      getCurrentMission$ = this.actions$.pipe(
        ofType<featureActions.GetUAVCurrentMissionRequest>(featureActions.ActionTypes.GetUAVCurrentMissionRequest),
        exhaustMap((action) =>
          this.dataService.getCurrentMission(action.payload).pipe(
            tap(response =>  //change to map here
              new featureActions.GetUAVCurrentMissionSuccess({uavId : action.payload.uavId, missionHandler : response.identifier}),
            ),
            tap(response =>
              new MissionsStoreActions.GetMissionUAVRequest({uavId : action.payload.uavId, missionHandler : response.identifier})
            ),
            catchError((error: HttpErrorResponse) => {
              this.snackBar.open(this.translate.instant('ERROR.HTTP.DRONE.NOT_UPDATABLE', {message: error.message}), this.translate.instant('BUTTON.OK'), {duration: 2500});
              return of(new featureActions.GetUAVCurrentMissionFailed({error}));
            }),
          )
        )
      );