如何使用 RxJS 取消 Angular 服务中之前的 HTTP 请求

Question

我知道有很多这样的问题，但它们经常让我感到困惑，或者让我很难应用到我的情况，所以我在这里问，这样我就可以把它放在我的脑海里。在我的组件打字稿文件中，我有一个方法调用使用 http 返回 api 数据的服务，因此当用户单击界面上的芯片时，他们会调用以下内容。

fetchCounts(filters?: any): void {
    this.loaded = false;
    this.apiCall = this.api.getCounts(filters).subscribe((results: any) => {
        // do something with the returned data
        this.loaded = true;
        this.apiCall.unsunscribe()
    });
}

我的 api 服务如下所示：

getCounts(filters?: any): Observable<any> {
    let params: any;
    if (filters?.car?.length || filters?.bike?.length) {
      params = this.addObjectToParams(new HttpParams(), filters);
    }
    return this.http.get('api/counts', { params } )
      .pipe(map(this.extractData));
}

现在我注意到，当用户单击我的界面添加和删除进行 API 调用的芯片时，由于过载/大量 API 调用，界面似乎不再显示真实数据。因此，如果进行新的调用（如果fetchCounts再次调用），我想取消当前的 api/http 调用。我尝试在getCounts方法中向 .pipe 添加去抖，就像这样.......pipe( debounceTime(500), map(this.extractData));但它似乎没有做任何事情。我想我必须添加一个switchMap，但是当我添加代码时，由于我缺乏理解，它就会中断。我目前正在查看文档...但任何帮助将不胜感激。

Answer 1

在这种情况下，您可以简单地使用方法取消订阅先前的呼叫unsubscribe。switchMap当我们有高阶可观察量时使用。

只需在拨打下一个电话之前取消订阅上一个电话即可。

fetchCounts(filters?: any): void {
    this.loaded = false;
    this.apiCall && this.apiCall.unsunscribe(); // Unsubscribe here as well.
    this.apiCall = this.api.getCounts(filters).subscribe((results: any) => {
        // do something with the returned data
        this.loaded = true;
        this.apiCall.unsunscribe();
    });
}