首页 > 解决方案 > 使用 switchMap 取消订阅以前的 http 请求,只取最新的一个

问题描述

我目前面临一个问题,第一次搜索可能需要 5 秒,第二次搜索需要 2 秒,问题是,第一次搜索需要更长的时间,将“擦除”之后完成的请求的结果,因为通话结束后。

我试图阅读

切换地图

在 rxJs 中并尝试使用它,但从我的尝试来看,它不会取消订阅先前的请求并删除结果。

我在这里可能做错了什么,但我无法准确指出问题所在。

Merge 的结果有 3 个变化源(分页、排序或新的搜索条件),对 sendSearchCriteria 的调用返回使用的数据。

sendSearchCriteria 返回一个Observable

有什么让你想到的,我做错了吗?

感谢您的帮助,

private loadDogsResults = (filtersInformation: FilterSearchCriteria) => {
    merge(this.sort.sortChange, this.paginator.page, of(filtersInformation))
      .pipe(
        distinctUntilChanged(),
        tap(() => (this.isLoading = true)),
        switchMap(() => this.sendSearchCriteria(filtersInformation)),
        //mergeMap(() => this.sendSearchCriteria(filtersInformation)),
        map(data => this.formatResults(data)),
        finalize(() => (this.isLoading = false)),
        catchError(error => this.handleError(error)),
        takeUntil(this._onDestroy$)
      )
      .subscribe((result: any[]) => {
        if (result.length > 0) {
          this.setDisplayedColumns(result[0]);
        }
        this.isLoading = false;
      });
  }

标签: javascriptangularhttprxjsswitchmap

解决方案


哪个事件触发search?此事件应该是您的 的来源Observable,它将与switchMap操作员一起“管道”。

正如我在这里看到的,如果您loadDogsResults()为每个事件调用,那么每次都创建一个新事件时它不会起作用Observable。是一个 Observable,它在订阅 observable 时of(filtersInformation)发出一次值,我认为这不是预期的行为。filtersInformation


推荐阅读