Question

我在Angular和RxJS中具有以下autosuggestlist构造：

this.autosuggestlistSubscription = this.input.valueChanges
  .pipe(
    debounceTime(500),
    distinctUntilChanged(),
    switchMap((value: string) => {
      return this.myBackendRequestFunction(value).pipe(catchError(err => {
        this.errorFn(err);
        return EMPTY;
      }));
    })
  )
  .subscribe((suggestlist: Array<OptionItem>) => {
    // go on with the suggestlist ...
  });

我们为输入字段中的更改注册自己。每次我们在此字段中键入内容时，管道就会开始工作。由于我们要在用户键入下一个请求后立即取消上一个请求，因此我们使用switchMap。

问题是，当我们调用autosuggestlistSubscription的退订时（在组件的销毁生命周期中）：

this.autosuggestlistSubscription.unsubscribe();

未调用订阅部分，因此自动建议不再运行。但是myBackendRequestFunction仍在switchMap中调用（我们在开发人员工具的“网络”标签中看到了触发的请求）。因此，我们的取消订阅仅适用于订阅部分。

我如何确保整个构造都不再订阅且不再调用？

Answer 1

如果输入值已更改，则内部订阅应被取消。也许这样可以使代码更简洁：

this.autosuggestlistSubscription = this.input.valueChanges
  .pipe(
    distinctUntilChanged(),
    debounceTime(500),
    switchMap((value: string) => this.myBackendRequestFunction(value),
    catchError(err => {
        this.errorFn(err);
        return EMPTY;
      })
  .subscribe((suggestlist: Array<OptionItem>) => {
    // go on with the suggestlist ...
  });

您甚至可以使用（不使用subscribe（））：

this.autosuggestlist$ = this.input.valueChanges.pipe(... pipes from fist code block...);

并在您的html中添加如下内容：

<ul>
   <li *ngFor="let item of autosuggestlist$ | async">{{item.fooPropertyName}}</li>
</ul>

这样，您完全不必退订。

如何在RxJS中称为回调函数的switchMap中退订？

1 个答案: