如何使用 RXJS 取消内部 HTTP 可观察的待处理请求？

Question

更改页面时取消挂起的 HTTP 请求

我们有一个 Angular 服务，它有一个昂贵的 HTTP 查询，可供 3 个不同的消费者访问。每个消费者都可以随时修改此查询，发出新请求，并且所有其他消费者都必须使用新数据进行更新。

因为 HTTP 订阅在完成后立即关闭，所以我们使用带有行为主体的内部可观察模式来保持消费者之间的联系（见下文）。

那么问题是，当用户更改页面时，当前未决的 HTTP 响应无法取消。

通常我认为在后台丢弃 HTTP 请求不会有太大的问题……但除了它是一项昂贵的操作之外，我发现在用户之后是否确实解决了待处理的响应已返回页面，它将使用旧查询的数据更新消费者。

没有布宜诺。

服务调用

private dataSubject = new BehaviorSubject<MyData>(...);
public data$ = this.dataSubject.asObservable();
...

getData(): Observable<MyData> {
  if (this.dataSubject)
    return this.data$;
  } else {
    const http$ = this.http.post(...))
      .pipe(map(response => response as MyData),
        takeUntil(this.unsubscribe$)); // see tearDown() below
    http$.subscribe(
      (availableDevices: MyData) => {
        this.dataSubject.next(availableDevices);
      }
    );
    return this.data$;
  }
}

我试图在每个消费者在 ngDestroy() 期间调用的服务中创建一个拆卸方法，但除非我完成了流，否则它不起作用。但那时，当用户返回页面时，我无法再次重新启动流。

tearDown(): void {
  this.unsubscribe$.next();
  this.unsubscribe$.complete();
  // this.dataSubject.next(null);
  // this.dataSubject.complete(); -- breaks
}

我绝不是 RXJS 专家，如果我的整体设计有误，请随时指出。我怀疑我应该使用 switchMap() 或 share 来防止两个消费者发出相同的请求；但由于这种可观察到的模式是半热的，我不确定正确的做法是什么。更不用说取消它了。

我们将不胜感激。

Answer 1

取消 http 调用最简单的方法是取消订阅。

const subscription: Subscription = this.http.post(...).subscribe(...);
subscription.unsubscribe();

您的teardown 方法很有用，通常用作垃圾收集和取消任何待处理的 rxjs 可观察对象。您可以在服务/组件/指令 ngOnDestroy 钩子中调用它，以确保没有可观察对象留在内存中。

但如果我没记错的话，Angular 处理 http observables，所以你不需要处理它们。一般来说，你只需要处理你自己生成的 observables，比如你的BehaviorSubject。

Answer 2

我解决了使用带有 AbortSignal / AbortController 的 Promises（异步函数）的问题，因为在我的情况下，尽管主题已取消，但 http 请求并未取消。也许我犯了一个错误，或者它现在可以工作了。但是，带有 AbortController 的 Promise 也可以完成这项工作。

请参阅here 如何使用 AbortController。但是，使用 AbortController 时可能会出现浏览器兼容性问题。

您还可以使用 .toPromise() 将 observables 转换为 Promise，因此这应该不是问题。