Angular：定期请求时如何取消订阅

Question

我有一个角度组件，我定期从服务中请求值：

setInterval(() => {
      this.updateValues();
    }, 1000);


updateValues(): void {
  if (this.isValuesUpdateRunning === false) {
    this.isValuesUpdateRunning = true;
    this.apiService.getCurrentValues().subscribe((data: any) => {
      if (data != null) {
        this.currentValues = data;
        this.isValuesUpdateRunning = false;
      }
    });
  }
}

我很确定我应该在某个地方取消订阅该服务，因为我确实通过这样做打开了很多订阅。我正在考虑使用异步管道，但我需要设置“isValueUpdateRunning”变量，如果我只是在模板中使用异步，这是不可能的。

此外，在 Angular 提供的“onDestroy”方法中取消订阅也无济于事，因为据我所知，只有在我离开页面时才会调用此方法。但我需要更频繁地关闭我的订阅，以防止保持数以千计的订阅处于打开状态。

我还尝试在设置我的值后立即关闭订阅，但是我没有在我的视图中获得任何值：

updateValues(): void {
  if (this.isValuesUpdateRunning === false) {
    this.isValuesUpdateRunning = true;
    const sub = this.apiService.getCurrentValues().subscribe((data: any) => {
      if (data != null) {
        this.currentValues = data;
        this.isValuesUpdateRunning = false;
      }
    });
    // closing the subscription right here:
    sub.unsubscribe();
  }
}

你能帮忙吗？我的想法不多了。

Answer 1

您可以在收到如下所示的响应后关闭订阅。另请注意，如果您从 getCurrentValues() 调用 AJAX API，则 HTTPObservable 是可自动关闭的，您无需关闭订阅，因为一旦您获得了由 Angular HTTP 客户端完成的 http 响应订阅。

 updateValues(): void {
      if (this.isValuesUpdateRunning === false) {
        this.isValuesUpdateRunning = true;
        const sub = this.apiService.getCurrentValues().subscribe((data: any) => {
          if (data != null) {
            this.currentValues = data;
            this.isValuesUpdateRunning = false;
          }
         // closing the subscription right here:
         sub.unsubscribe();
        }, error => { sub.unsubscribe});

      }
    }

Answer 2

假设您在模板中呈现currentValues，我建议使用异步管道。

就isValuesUpdateRunning逻辑而言，您可以使用exhaustMap并将setTimeout替换为RxJS区间

我在下面放了一个演示 - 我强烈建议学习模拟 api 服务并亲自尝试这些东西。

const currentValues$ = interval(1000)
  .pipe(
    tap(i => console.log(`timer::${i}`)),
    exhaustMap(i => apiService.getCurrentValues(i)),  // ignores new values until api returns
    tap(apiData => console.log(`api::${apiData}`)),
    filter(data => !!data)                            // filter for truthy values
    takeUntil(stopClick$),                            // or this.destroyed$ component logic
  )

（假设模板中使用了异步管道，例如{{ currentValues$ | async | json }}）

更新 - 最好把 takeUntil 最后！

Stackblitz

参考文献

exhaustmap - 在当前 observable 完成之前忽略新发出的值（角度 http 请求自动完成）

Answer 3

如果使用 Angular http 客户端，您无需像@Kurt Hamilton 提到的那样取消订阅该服务。您需要停止创建订阅的设置间隔。

使用 rxjs 运算符的示例。

interval(1000)
   .pipe(
     takeWhile(() => this.isValuesUpdateRunning), // call subscription until the condition is false
     switchMap(() => this.apiService.getCurrentValues()),
     filter(Boolean), // check if response is not null
     tap(resp => { this.data = resp; this.isValuesUpdateRunning = false; }),
     // handle errors