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

Question

我正在使用 Angular7 和 NGRX，以及 GO 中的服务器。

我的ngrx效果中有如下代码=>

  //#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;
    }),
  );

基本上，这会打开2个 channel ，然后接一个任务。

最后一个 Action ，会派发另一个效果

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

那，使用 api 调用 getCurrentMission

会向服务器询问任务

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

现在，我面临的问题是。如果我装载 4 架无人机，我将总共有 12 个调用。最后一个 get 调用被取消了，因为它在短时间内被问了 3 次。

我不明白到底是什么原因造成的。服务器确实收到了检索数据的调用(我在发送响应之前添加了日志)，并发送了响应，但是浏览器上的调用被取消了，所以我的 ngrx init 调用流程中断了。一次只接受一个调用

可能是什么问题？

编辑:我还尝试在 postman 上运行一系列测试，通过毫不延迟地调用同一端点 5 次，并且成功了。所以我猜 ngrx 或 chrome 中的某些东西取消了我的电话？

Answer 1

你正在使用 switchMap 所以

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

所以我建议你像这样更改代码

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

或者使用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}));
            }),
          )
        )
      );