switchMap 未使用以下代码取消先前的请求

Question

当用户在自动完成文本框中输入值时调用 searchFunction。因此，这段代码应该做的是 return 根据用户输入自动完成下拉列表的选项，它应该只显示最后一个查询的选项。
如果我使用这段代码，当它在其他地方调用时，return 什么都没有（当我像上面那样使用 subject 和 observable 时）。这个函数被调用的地方期待一个observable，所以我们必须从这里return和observable。另外，我无法 edit/chnage 调用上述函数的函数。
要仅获取最后的结果，我需要 switchMap。还有其他方法可以做到吗？
以下代码无效。请建议需要更改

export class AppComponent {
  readonly search = new ReplaySubject<string>(1);
  searchResponse!: Observable<string[]>;

  constructor(private http: HttpClient) {}

  searchFunction = (query: string) => {
    return (this.searchResponse = this.search.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((query: string) => {
        return this.http.searchData(query).pipe(
          map((res: string[]) => {
            return res.slice(0, 100);
          })
        );
      })
    ));
  };
}

Answer 1

在本文中，您可以找到使用 RxJS 运算符的完整实现 - 请参阅“Search TypeAhead - switchMap 运算符示例”部分 - 希望对您有所帮助！

https://blog.angular-university.io/rxjs-higher-order-mapping/

Answer 2

问题在于：

searchFunction is being called when a user enters value in autocomplete textbox

每次调用该函数时都会创建一个新的订阅。虽然模板应该退订之前的订阅，但解决方案并不理想。

我会尝试这样的事情：

export class AppComponent {
  readonly search = new Subject<string>();
  readonly searchResponse: Observable<string[]>;

  constructor(private http: HttpClient) {
    this.searchResponse = this.search.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((query: string) => {
        return this.http.searchData(query).pipe(
          map((res: string[]) => {
            return res.slice(0, 100);
          }),
          // So we don't wreck the pipe. Import EMPTY from 'rxjs'
          catchError(() => EMPTY)
        );
      })
  }

  searchFunction = (query: string) => {
    this.search.next(query);
  };
}

在这种情况下，您对搜索词只有一次订阅。如果您使用的是响应式表单，则可以收听 valueChanges.

switchMap 未使用以下代码取消先前的请求

switchMap is not canceling the previous request with below code

request

rxjs

angular

switchmap