我正在寻找一种高效的解决方案,以避免用户在等待后端API响应时多次点击提交按钮。
我已经考虑了以下解决方案,但仍在寻找其他处理方法。
使用加载器,它将禁用整个HTML,直到我们获得某些响应。
使用exhaustmap来避免多次HTTP调用。
使用throttletime手动限制用户在特定时间段内无法点击。
如果有其他解决方案可用,请指导我。
我正在寻找一种高效的解决方案,以避免用户在等待后端API响应时多次点击提交按钮。
我已经考虑了以下解决方案,但仍在寻找其他处理方法。
使用加载器,它将禁用整个HTML,直到我们获得某些响应。
使用exhaustmap来避免多次HTTP调用。
使用throttletime手动限制用户在特定时间段内无法点击。
如果有其他解决方案可用,请指导我。
在这种情况下,我建议使用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 实例返回响应并完成。
loading = false;
.
...
submit(): void {
loading = true;
this.someserive.getData().pipe(finalize(() => this.loading = false).subcribe(...
.
....
}
// 在组件的模板中
<button [disabled]="loading" (click)="submit()">Submit</button>