防止用户单击按钮，直到服务响应角 7 rxjs答案

【问题标题】：prevent user to click button until service response angular 7 rxjs防止用户单击按钮，直到服务响应角 7 rxjs
【发布时间】：2020-09-07 15:57:10
【问题描述】：

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

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

使用加载器，它将禁用整个 html，直到我们得到一些响应。
使用exhaustmap避免多次http调用
使用throttletime，这将手动不允许用户在特定时间段内点击。

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

【问题讨论】：

标签： javascript angular typescript rxjs

【解决方案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 实例返回响应并完成。

【讨论】：

效果很好！！

【解决方案2】：

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

//在组件的控制器中

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

//在组件的模板中

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

【讨论】：