Angular，RxJS - 如何使用 switchMap 取消以前的请求？答案

【问题标题】：Angular, RxJS - How to cancel previous requests using switchMap?Angular，RxJS - 如何使用 switchMap 取消以前的请求？
【发布时间】：2021-03-25 06:15:00
【问题描述】：

我试图自己弄清楚很长一段时间，但我卡住了。

我的情况：我有一个包含数据的表，当用户进入页面时，请求转到 REST API。表格上方有一个表格，用于指定/过滤表格的结果。当用户点击一个按钮时，带有查询参数的新请求会转到服务。

我正在尝试找到一种方法来在用户单击按钮时停止先前的请求，以搜索具有特定参数的表

这是我迄今为止所做的stackblitz。也许我的方法是错误的，有人可以告诉我如何更好地编写它，或者也许只有几件事需要纠正。

感谢您的帮助

【问题讨论】：

请提供您的代码，特别是什么不起作用。很高兴您提供了 stackblitz，但您的问题并不明显。
switchMap() 不会“取消”先前的 http 请求，而是会停止侦听先前请求的响应，而仅侦听来自最新请求的响应。

标签： javascript angular rxjs

【解决方案1】：

您可以在 pipe 中使用 takeUntil 运算符，并将 subject 传递给它，每次应用新过滤器时，您都可以向该主题发出一些内容以取消订阅之前的订阅并再次订阅！让我举个例子说明如何使用这个运算符：

无论您的代码是否正常工作！！我只添加了关于如何使用 takeUntil 运算符的部分！

...
 unsubscribe = new Subject<boolean>();

  constructor(private _service: ServiceConnectService) {}

  ngOnInit() {
    this.clickStream
      .pipe(
        map(() => console.log(1)),
        switchMap(() => {
          return this.getMethodServicesInstances();
        }),
        takeUntil(this.unsubscribe) // this will be executed once you call next with a value!! and the subscription will be stopped!
      )
      .subscribe(results => {
        console.log(2);
      });
  }

  applyFilter(){
    this.unsubscribe.next(true);
    /*
      you can then rerun the subscription and reset the unsubscribe subject state to null!
     */
  }
...

【讨论】：