Как ограничить запросы API в моем приложении Angular 9

Question

Я впервые пытаюсь это сделать, если кто-то может помочь, это было бы очень полезно. То, что мне нужно или я пытаюсь, это ждать каждого ответа HTTP, когда вы делаете запрос к API, пока вы не получите ответ, вы не можете нажать кнопку еще раз, но на самом деле не знаете, как начать

Это код, в котором я вызываю функцию, которая выполняет метод POST для API

constructor(
    private _builder:FormBuilder, private usersService: UsersService,private router: Router,
    public _snackBar: MatSnackBar
    ) {}

  sendUser(){
    this.bSignIn = true;
    let formData = new FormData();
    formData.append('Identifier', this.loginForm.get('Identifier').value);
    formData.append('Password', this.loginForm.get('Password').value);
    setTimeout(() => {
    this.usersService.validateUserCredentials(formData)
    .subscribe(
      res => {
        this.bSignIn = false;
        let auxRes: any = res;
        if(auxRes.type == 'success'){
          let auxUser = { 
            userId: auxRes.id,
            personId: auxRes.person_id,
            clientId: auxRes.client_id,
            projectId: auxRes.project_id
          }
          this.isSigned = true;
          //this.usersService.validateSigned(auxRes);
          localStorage.setItem('leadLogged', JSON.stringify(auxUser));
          this.goToUsersDashboard(auxRes.id);
        }
        else{
          this.openSnackBar(this.snackMessage);
          this.loginForm.reset();
        }
      },
      err => {
        console.log("else");
        window.alert('Introduce valid data');
        }
    )}, 4000);

  }

ValidateUserCridentials функция, выполняющая метод POST

Функция ValidateUsersCridentials

validateUserCredentials(user: any){                              
    return this.http.post(this.API_URL+'NONE-NONE-2/'+ENDPOINT_NAME+'/login/', user, this.httpOptions);
  }

Это моя кнопка

<button mat-raised-button [class.black]="!loginForm.invalid" [disabled]="loginForm.invalid" type="submit">Sign in</button>

Answer 1

Это просто, просто используйте некоторую переменную blockButton=false - и когда пользователь нажимает кнопку, затем внутри обработчика события щелчка, в начале используйте

if(this.blockButton) return;
this.blockButton=true;

, таким образом, вы «блокируете» обработчик щелчка ( при первом щелчке), чтобы выполнить основной код, если blockButton равно true. Затем в разделе .subscribe (который выполняется при ответе API) напишите

this.blockButton=false

Это разблокирует вашу кнопку (только когда вы получите ответ от serwer)

Answer 2

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

Соответствующий код:

component.ts

  disableConfig = false;

  showConfig() {
    this.configService.getConfig()
      .subscribe(
        (data: Config) => this.config = { ...data }, // success path
        error => this.error = error, // error path
        _ => this.disableConfig = false // on complete
      );
  }

component . html

  <button [disabled]="disableConfig" (click)="clear(); disableConfig = true; showConfig()">get</button>

Проверьте следующий стек стека, нажав кнопку get , чтобы увидеть, как она отключается при нажатии и повторно включается при возврате ответа (или ошибка). Код содержится в папке config .

https://stackblitz.com/edit/angular-ycvjsz

Answer 3

Когда вы нажимаете кнопку входа в систему, отключите ее в машинописном коде и затем вызовите API. Как только вы получите результат, включите его снова.

Сделайте что-то вроде ...

<button [disabled]="disabled" (click)="send()">Login</button>

Код:

async send(){
    // disable the login button
    this.disabled = true;

    // using delay for http response
    await this.delay(3000);

    this.disabled = false;

  }

  private delay(ms: number){
  return new Promise(resolve => setTimeout(resolve, ms));
  }

disable - это собственность в вашем компонента и установите его на true, как только вы нажмете на него, а затем сделаете запрос API.

Быстрая демонстрация -> https://stackblitz.com/edit/angular-qe11v1