当其他人调用相同的方法时取消 HTTP 请求

Question

我在我的应用程序中使用 angular、ngrx 和 rxjs。 当一个效果被调用两次时，第一个效果的http请求被取消，只计算第二个。

我想在 ngrx 范围之外的函数中模拟它。

我有以下方法：

checkMissionPoint(
    positions: Array<Cesium.Cartographic>
  ): Observable<{
    valid: boolean;
    response: Array<CheckWaypointResponse>;
  }> {

    return this.store$.pipe(
      select(TransactionsStoreSelectors.selectedTransactionId),
      take(1),
      switchMap((tId) =>
        this.httpClient
          .post<Array<CheckWaypointResponse>>(
            HTTPUtils.getPath(`${environment.FLIGHT_URL}/trajectories/${tId}/checkpoints`),
            {positions}
          )
          .pipe(
            switchMap((result) => {
              return result;
            })
          )
      )
    );
  }

我在我的应用程序中在应用程序的各个位置这样调用此方法

    this.missionHelperService.checkMissionPoint(positions)

现在，我知道了一些取消它的丑陋方法，如果再次调用该方法并且引用仍然存在，则保留引用并取消订阅。但我想知道是否有一个不错的 rxjs 方法来实现这一点。

谢谢。

编辑：我做了一个小的 stackblitz，但你需要在你的 chrome 控制台中设置 SLOW 3G 连接https://angular-xm2ixt.stackblitz.io

你会注意到 obs 被调用了两次，api 会触发和应答，我想要的是第二次调用取消第一次（并向正在监听的人发送错误，sub 2 将正常运行）

Answer 1

我也遇到过类似的情况，我就是这样解决的。

checkMissionPointCalled = new EventEmitter<void>();

checkMissionPoint(
    positions: Array<Cesium.Cartographic>
): Observable<{
    valid: boolean;
    response: Array<CheckWaypointResponse>;
}> {
    this.checkMissionPointCalled.emit();
    return this.store$.pipe(
        select(TransactionsStoreSelectors.selectedTransactionId),
        take(1),
        switchMap((tId) =>
            this.httpClient
                .post<Array<CheckWaypointResponse>>(
                     HTTPUtils.getPath(`${environment.FLIGHT_URL}/trajectories/${tId}/checkpoints`),
                        { positions }
                )
         ),
        takeUntil(this.checkMissionPointCalled)
    );
}

但是，我无法使用

         .pipe(
            switchMap((result) => {
              return result;
            })
          )

在httpClient.post 通话后，我认为这可能是一个错误。所以，我的答案中没有包含它。

您可能还想在ngOnDestroy 方法中关闭checkMissionPointCalled。

Answer 2

您现在遇到的问题是，checkMissionPoint() 方法为每个调用者返回一个全新的 observable。

如果你有一个私有的 observable 并将相同的 observable 返回给所有调用者，我认为你可以实现你想要做的事情。这个 observable 将使用 switchMap() 来实现您正在寻找的取消行为。

private positions$ = new Subject();
private uri$ = this.store$.pipe(
    select(TransactionsStoreSelectors.selectedTransactionId),
    map(tId => HTTPUtils.getPath(`${environment.FLIGHT_URL}/trajectories/${tId}/checkpoints`)
);
private checkMissionPoint$ = combineLatest([this.uri$, this.positions$]).pipe(
    switchMap(([uri, positions]) => this.httpClient.post<CheckWaypointResponse[]>(uri, {positions}))
);

checkMissionPoint(
    positions: Array<Cesium.Cartographic>
  ): Observable<{
    valid: boolean;
    response: Array<CheckWaypointResponse>;
  }> {
    this.positions.next(positions);

    return this.checkMissionPoint$.pipe(
      take(1)
    );
}

根据您的用例，让方法返回 void 并公开公共可观察对象可能会更简洁：

private positions$ = new Subject();
private uri$ = this.store$.pipe(
    select(TransactionsStoreSelectors.selectedTransactionId),
    map(tId => HTTPUtils.getPath(`${environment.FLIGHT_URL}/trajectories/${tId}/checkpoints`)
);
public missionPoint$ = combineLatest([this.uri$, this.positions$]).pipe(
    switchMap(([uri, positions]) => this.httpClient.post<CheckWaypointResponse[]>(uri, {positions}))
);

setPosition(
    positions: Array<Cesium.Cartographic>
  ): Observable<{
    valid: boolean;
    response: Array<CheckWaypointResponse>;
  }> {
    this.positions.next(positions);
}