如何取消飞行中挂起的 http api 调用？

Question

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

Answer 1

为禁用的按钮创建属性。

isDisabled:boolean=false;

点击后变为true

this.isDisabled=true;

在订阅中获取数据后再次更改为 false

this.isDisabled=false;

在html中绑定到按钮

[disabled]="isDisabled"

Answer 2

您可以取消订阅请求：

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

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

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

Answer 3

您是否考虑过不允许禁用按钮的场景。

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

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

对于这种情况 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();

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

如何取消飞行中挂起的 http api 调用？

How to cancel in flight pending http api calls?

api

observable

rxjs

angular

switchmap