javascript - Angular rxjs 去抖以限制用户发送多个请求

Question

基本上我的问题是，当连接速度较慢时，用户可以多次按下保存按钮并且正在保存多个数据。此问题不会在本地发生，但在暂存时会发生。

虽然我已经设置了 this.hasBeenSubscribed = true;当请求完成并根据条件在按钮上[禁用]时，用户仍然能够多次单击该按钮并且可以保存多次，这是错误的。

有人说 Angular rxjs debounce 可以解决这个问题，有人可以启发我吗？谢谢。根据下面的代码，它将如何帮助我的问题。谢谢。

代码

save(): void {
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .subscribe(
        (results: FeedbackRequest[]) => {
          this.hasBeenSubmitted = true;
        },
        (error) => {
          this.hasBeenSubmitted = false;
          this.handleInvalidFields(error, 'Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.');
          this.messageDialogService.show('Failed to save the Feedback Request as draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
          create.unsubscribe();
        }
      );
  }

html

 <button [disabled]="form.invalid || (!duplicateMode && !form.dirty) || (!editMode) || hasBeenSubmitted"
        mat-raised-button *ngIf="form" (click)="save()" type="submit">
        <ng-container>
          <span>SAVE</span>
        </ng-container>
      </button>

Answer 1

如果我理解正确的话，您想限制用户多次点击“保存”，并且您说您已经应用了禁用条件。

您可以尝试重写您的保存按钮，如下所示。

save(): void {
    this.hasBeenSubmitted = true;
    const create = this.requestFormService.createRequestData(this.form, this.respondents)
      .pipe(
       take(1), 
       finalized(this.hasBeenSubmitted = false),
       ),
       catchError((err) =>{
          this.hasBeenSubmitted = false;
          this.handleInvalidFields(error, 'Failed to save the Feedback Request as 
          draft. One or more fields contain invalid values. Input a valid value to proceed.');
          this.messageDialogService.show('Failed to save the Feedback Request as 
          draft. One or more fields contain invalid values. Input a valid value to proceed.', true);
         create.unsubscribe();
      })
      .subscribe(
        (results: FeedbackRequest[]) => {

        }
      );
  }

我更改的主要内容是在创建调用之前执行 this.hasBeenSubscribed = true;。

希望对您有所帮助。