如何在 Angular 中使用 RxJS finalize 来限制用户点击

Question

How to use rxjs finalized in angular to limit user from clicking the save button multiple times and sending request multiple times.

Assume this call is triggered by a button click on our form. Many people still double-click on those buttons and we definitely want to prevent 2 calls being sent to our backend API.

My code is below. Thanks for any help.

Code

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

Instead of using finalize , it will be more straightforward to achieve the above logic by using the take() operator. As stated on the RxJS documentation for take ,

Emit provided number of values before completing.

save(): void {
  const create = this.requestFormService.createRequestData(this.form, this.respondents)
    .pipe(
      take(1),
    ).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();
    }
  );
}