Javascript 防止用户单击按钮，直到服务响应为rxjs

我正在寻找有效的解决方案，以避免用户点击提交按钮一次又一次，直到他们从后端API得到响应

我曾想过以下解决方案，但正在寻找任何其他方法来处理这个问题

使用加载器，它将禁用整个html，直到我们得到一些响应

使用exhaustmap避免多个http调用

使用throttletime，它将手动不允许用户在特定时间段内单击

---

如果我们可以使用任何其他解决方案，请指导我。

您可以禁用按钮本身，直到通过在组件的控制器文件中添加标志获得响应

//在组件的控制器中

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

//在组件的模板中

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

---

您可以禁用按钮本身，直到通过在组件的控制器文件中设置标志获得响应为止

//在组件的控制器中

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

//在组件的模板中

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

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

<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);
}

您单击“提交”，在HttpClient实例返回响应并完成之前，exhaustMap操作员将忽略所有正在进行的单击事件。

在这种情况下，我建议使用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);
}

您单击“提交”，在HttpClient实例返回响应并完成之前，exhaustMap操作符将忽略所有正在进行的单击事件