Angular前端防止用户多次点击按钮重复提交请求的实现方案

• 提交状态锁：请求发起后标记提交中状态，拦截后续提交操作，请求结束后恢复状态，实现成本最低，适配绝大多数场景
• 函数节流：设置固定冷却时间，单位时间内仅触发第一次提交请求
• 请求全局去重：给每个请求生成唯一标识（比如请求方法+路径+参数哈希），同一标识未完成的重复请求直接拦截
• 操作入口阻断：提交后立即隐藏/移除提交按钮，或跳转页面，根本上杜绝重复点击可能

针对你的场景，最推荐使用提交状态锁方案，仅需几行代码修改即可解决问题，无额外依赖，也不会误拦截正常的后续提交操作，修改代码如下：

1. 模板（HTML）修改 #

给保存按钮绑定禁用状态，提交中时不可点击，也可以同步修改按钮文案提升用户体验：

<ng-template #editButtons>
  <div class="flex" *ngIf="isEditing">
    <app-page-section-cards-btn
      [btnData]="pageSectionsOptions.btnData.cancel"
      (btnClickEvent)="cancelEdit()"
    ></app-page-section-cards-btn>
    <app-page-section-cards-btn
      [btnData]="isSubmitting ? {text: '提交中...', disabled: true} : pageSectionsOptions.btnData.save"
      (btnClickEvent)="saveDeal()"
      [disabled]="isSubmitting"
    ></app-page-section-cards-btn>
  </div>
</ng-template>

如果自定义按钮组件不支持直接传入disabled属性，仅在逻辑层做拦截也可以实现效果。

2. 业务逻辑（TS）修改 #

新增提交状态标记，请求全流程（成功/失败/异常）都要重置状态，避免出错后按钮一直不可用：

// 组件类新增状态变量
private isSubmitting = false;

saveDeal(){
  // 提交中直接拦截后续请求
  if (this.isSubmitting) return;
  this.isSubmitting = true;

  const payload = {
    "id": 0,
    "name": this.dealDispositionFormFields.dealName,
    "dealType": "Idle Buyout",
    "annualRentProposed": null,
    "annualRentCurrent": null,
    "firmTermRemaining": null,
    "firmTermAdded": null,
    "maxAvailableTerm": null,
    "status": null,
    "capitalContribution": null,
    "parentCloneId": null,
    "accountId": this.currentAccount.accountId,
    "transactionId": this.transactionData.id,
    "dealTypeValues": JSON.stringify(dealTypeValues)
  }
  this.createDispositionDeal(payload);
}

createDispositionDeal(payload:any) {
  this._dealService.createDeal(payload)
  .subscribe({
    next: (res) => {
      this._notificationService.showSuccess('Deal was successfully created.');
      if(res.isSuccess){
        this.refreshDealDetailsPage(res.data);
      }
    },
    error: (err) => {
      console.log('Error creating deal')
    },
    // finalize回调无论请求成功失败都会触发，统一在这里重置状态
    finalize: () => {
      this.isSubmitting = false;
    }
  })
}

内容的提问来源于stack exchange，提问作者Martin Lautz