Как отписаться от в SwitchMap, называемой функцией обратного вызова в RxJS?

Question

У меня есть следующая конструкция autosuggestlist в Angular & RxJS:

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.

Проблема заключается в том, что при вызове unsubscribe для нашей 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 ...
  });

Вы можете даже работать с (без подписки ()):

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

и в вашем html с чем-то вроде этого:

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

Таким образом, вам вообще не придется отказываться от подписки.