Angular rx js debounce, чтобы ограничить отправку пользователем нескольких запросов - PullRequest
Новая
       8

Angular rx js debounce, чтобы ограничить отправку пользователем нескольких запросов

0 голосов
/ 06 мая 2020

В основном моя проблема заключается в том, что при медленном соединении пользователь мог нажимать кнопку сохранения несколько раз и сохраняются несколько данных. Эта проблема не возникает локально, но возникает при постановке.

Хотя я уже установил this.hasBeenSubmitted = true; когда запрос выполнен и [отключен] на кнопке в зависимости от условия, пользователь все еще мог нажимать кнопку несколько раз и мог сохранять несколько раз, что неверно.

Некоторые говорят, что Angular rx js 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>

1 Ответ

1 голос
/ 06 мая 2020
• 1000 * 
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.hasBeenSubmitted = true; перед вызовом create.

Надеюсь, это поможет.

...