Как я могу ограничить запросы API с помощью наблюдаемых в Angular 9

Question

Я уже решаю эту проблему с обещаниями, но теперь мой учитель хочет решить с помощью наблюдаемых, но я не очень хорошо понимаю, как они работают, если кто-то может мне помочь, это будет очень полезно.

Логика c моей программы такова: когда вы отправляете кнопку, приложение позволяет вам делать только один запрос к API, не более, даже если вы пытаетесь нажать кнопку очень быстро, чтобы сделать много вызовов

• Ниже я приведу свой файл TS, html файл и пример в стек-блиц о том, как это работает * html файл *

<div class="row justify-content-center">
    <form class="example-form " [formGroup]="loginForm" (ngSubmit)="sendAdmin()">
        <mat-form-field class="example-full-width">
            <input matInput formControlName="email" placeholder="Email" type="email">
        </mat-form-field><br>
        <div class="alert-danger " *ngIf="email.invalid && (email.dirty || email.touched)">
            <div class="container-error-message space" *ngIf="email.errors.required">
                <p>Email required</p>
            </div>
        </div> 
        <br>
        <br>
        <mat-form-field class="example-full-width">
            <input matInput formControlName="password" placeholder="Password" type="password">
        </mat-form-field><br>
        <div class="alert-danger space" *ngIf="password.invalid && (password.dirty || password.touched)">
            <div class="container-error-message" *ngIf="password.errors.required">
                <p>Password required</p>
            </div>
            <div class="container-error-message" *ngIf="password.errors.minlength">
                <p>Password must be at least 5 characters long.</p>
            </div>
        </div>
       <br>
       <br>
       <button mat-raised-button [class.black]="!loginForm.invalid" [disabled]=" loginForm.invalid || disabled" class="colour_button" type="submit">Sign in</button>
    </form>
</div>

Ts файл

constructor(
    private _builder:FormBuilder, private adminService: AdminService,private router: Router,
    public _snackBar: MatSnackBar
    ) {}

     async sendAdmin(){
        this.bSignIn = true;
        let formData = new FormData();
        formData.append('Email', this.loginForm.get('Email').value);
        formData.append('Password', this.loginForm.get('Password').value);
        this.disabled = true;
       // using delay for http response
       await this.delay(3000);
       this.disabled = false;
        this.adminService.validateAdminCredentials(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.goToAdminDashboard(auxRes.id);
            }
            else{
              this.openSnackBar(this.snackMessage);
              this.loginForm.reset();
            }
          },
          err => {
            console.log("else");
            window.alert('Introduce valid data');
            }
        );
      }
    private delay(ms: number){
        return new Promise(resolve => setTimeout(resolve, ms));
      }

Пример работы кнопки отправки

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

Answer 1

Используя ваш пример, доступный на stackblitz, я создаю наблюдаемую копию, которая будет повторять то же поведение обещания.

import { delay, tap } from 'rxjs/operators';

  ...

  disabled = false;

  send() {
    this.disabled = true;
    this.myObservable().pipe(
      delay(200),
      tap(() => this.disabled = false)
    ).subscribe();
  }

  private myObservable() {
    const observable = Observable.create(observer => {
        observer.next({});
        observer.complete();
    });
    return observable;
  }

Однако, если вы хотите добавить задержку к вашему наблюдаемому методу, называемому validateAdminCredentials, Вы можете добавить оператор задержки:

import { delay, tap } from 'rxjs/operators';

...
this.bSignIn = true;
let formData = new FormData();
formData.append('Email', this.loginForm.get('Email').value);
formData.append('Password', this.loginForm.get('Password').value);
this.disabled = true;
this.usersService.validateAdminCredentials(formData)
.pipe(
  delay(3000), // simulating a HTTP request
  tap(() => this.disabled = false) // after HTTP request, disable is false
)
.subscribe(res => {
  this.bSignIn = false;
  let auxRes: any = res;
  ...

В другой руке вы можете использовать функцию myObservable() в своем потоке с оператором switchMap:

import { switchMap, delay, tap } from 'rxjs/operators';

  this.myObservable().pipe(
      delay(3000),
      switchMap(() => this.usersService.validateAdminCredentials(formData),
      tap(() => this.disabled = false),
    )
  )
  .subscribe(res => {
    this.bSignIn = false;
    let auxRes: any = res;
    ...


  private myObservable() {
    const observable = Observable.create(observer => {
        observer.next({});
        observer.complete();
    });
    return observable;
  }

Вы можете прочитать о Rx js и узнайте о его операторах.