如何在飞行中取消待处理的 http api 调用？答案

【问题标题】：How to cancel in flight pending http api calls?如何在飞行中取消待处理的 http api 调用？
【发布时间】：2020-10-28 20:37:55
【问题描述】：

我的网页上有一个按钮，可以按下该按钮进行 http api 调用。获得响应并反映在页面中需要一些时间。那么有没有办法在飞行中取消挂起的http请求以避免多次api调用，以防用户多次按下可能导致数据不一致？

【问题讨论】：

您可以禁用该按钮，直到电话回来
我想过这样做，但它是一个日期选择器，有时对于较大的日期范围可能需要相当长的时间来加载数据。所以觉得最好覆盖和取消以前的请求。

标签： angular api rxjs observable switchmap

【解决方案1】：

您是否考虑过不允许禁用按钮的情况。

问。那么接下来会发生什么？
A. 仍然允许用户按下按钮。

但在这种情况下，您不想进行第二次调用（考虑到第一次 API 调用尚未完成）。如果第一次调用正在进行中，exhausMap 会自动取消第二次调用。这就是排气地图的美妙之处。

对于这种场景，来自 RXJS 的exhaustMap 很有用。

Read this nice article to understand it further

虚拟代码

fromEvent(this.saveButton.nativeElement, 'click')
    .pipe(
        exhaustMap(() => this.saveCourse(this.form.value))
    )
    .subscribe();

或switchMap 可能会很方便，您有一个请求要去，突然第二个请求来了，所以它会取消第一个请求并开始第二个请求的过程。

fromEvent(this.saveButton.nativeElement, 'click')
        .pipe(
            swtichMap(() => this.saveCourse(this.form.value))
        )
        .subscribe();

这取决于适用于您的应用程序的场景。

【讨论】：

是的，不能禁用搜索按钮。但要求是覆盖第一个 api 调用并取消它并改为进行第二个调用。例如，按钮是一个下拉菜单，用户界面会发生变化，并且应该反映在 api 响应中。我在 RxJS 中遇到了一个叫做 switchMap 的东西，它可能更适用于我的情况。
是的 swtichMap 可能会很方便。

【解决方案2】：

您可以取消订阅请求：

@Component({ /* ... */ })
export class AppComponent {
  /* ... */
  private request;

  search() {
    if(request){
        request.unsubscribe();
    }

    this.request = this.searchService.search(this.searchField.value)
      .subscribe(
          //...
      );
  }
}

【讨论】：

【解决方案3】：

为禁用的按钮创建属性。

isDisabled:boolean=false;

点击后变为真

this.isDisabled=true;

在您获得订阅数据后再次更改为 false

this.isDisabled=false;

在 html 中将其绑定到按钮

[disabled]="isDisabled"

【讨论】：

感谢您的回答。我已经尝试过这种方法，但是 api 调用可能需要相当长的时间才能加载。虽然这是一种方法，但有没有我提到的具体解决方案？