禁止用户点击按钮直到服务响应 Angular 7 RxJS

Question

我正在寻找一种高效的解决方案，以避免用户在等待后端API响应时多次点击提交按钮。

我已经考虑了以下解决方案，但仍在寻找其他处理方法。

1. 使用加载器，它将禁用整个HTML，直到我们获得某些响应。

2. 使用exhaustmap来避免多次HTTP调用。

3. 使用throttletime手动限制用户在特定时间段内无法点击。

如果有其他解决方案可用，请指导我。

- Bravo

Answer 1

在这种情况下，我建议使用exhaustMap()作为主要解决方案。 在模板中：

<button (click)="submitForm()">Submit</button>

然后在你的组件中：

submit$: Subject<boolean> = new Subject();

constructor() {
  this.submit$.pipe(
    exhaustMap(() => this.http.get("api/endpoint"))
  ).subscribe(res => {});
}

submitForm() {
  this.submit$.next(true);
}

您单击“提交”后，exhaustMap()操作符将忽略所有后续的点击事件，直到 HttpClient 实例返回响应并完成。

- a_zatula

---

非常好用！！ - Mikael Boff

这是我找到的最佳答案，我只想阻止后续请求直到所请求的完成。谢谢。 - Zablon

Answer 2

你可以在组件控制器文件中设置一个标识，以便在等待响应时禁用按钮本身。

loading = false;
.
...
submit(): void {
  loading = true;
  this.someserive.getData().pipe(finalize(() => this.loading = false).subcribe(...
  .
  ....
}

// 在组件的模板中

<button [disabled]="loading" (click)="submit()">Submit</button>

- Amit Desai