Как использовать Rx JS finalize в Angular для ограничения пользовательских кликов

Question

Как использовать rx js завершено в angular, чтобы ограничить пользователя от нажатия кнопки сохранения несколько раз и отправки запроса несколько раз.

Предположим, этот вызов запускается нажатием кнопки в нашей форме. Многие люди по-прежнему дважды щелкают по этим кнопкам, и мы определенно хотим предотвратить отправку двух вызовов нашему внутреннему API.

Мой код ниже. Спасибо за любую помощь.

Код

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

Вместо использования finalize будет более просто достичь вышеуказанного logi c с помощью оператора take(). Как указано в документации Rx JS для take ,

Перед завершением выдайте указанное количество значений.

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();
    }
  );
}