Ограничение запросов API с помощью наблюдаемых

Question

Это первый раз, когда я попробовал это и не работает, кто-то может привести пример? Что я пытаюсь сделать, когда вы нажимаете кнопку входа в систему, чтобы вы могли сделать только один просьба к API не более, но мне нужно это сделать с помощью наблюдаемых, теперь у меня есть обещания. Как я могу это сделать?

• Отключенный атрибут - это тот, который отключил или нет моей кнопки

Это мой файл TS, где я ограничиваю запросы, но с обещаниями

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 = {
            firstName: auxRes.first_name,
            personId: auxRes.id,
            clientId: auxRes.client_id
          }
          this.isSigned = true;
          localStorage.setItem('leadLoggedAdmin', JSON.stringify(auxUser));
          this.goToAdminDashboard(auxRes.first_name);
        }
      },
      err => {
        this.bSignIn = false;
        this.openSnackBar(this.snackMessage);
        this.loginForm.reset();
      }
      );
  }
  private delay(ms: number){
    return new Promise(resolve => setTimeout(resolve, ms));
  }

* Это то, что я пытался, но не работает *

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;
    this.adminService.validateAdminCredentials(formData)
    .pipe(
      delay(200),
      mergeMap(() => this.myObservable()),
      tap(() => this.disabled = false)
    )
    .subscribe(
      res => {
        this.bSignIn = false;
        let auxRes: any = res;
        if(auxRes.type == 'success'){
          let auxUser = {
            firstName: auxRes.first_name,
            personId: auxRes.id,
            clientId: auxRes.client_id
          }
          this.isSigned = true;
          localStorage.setItem('leadLoggedAdmin', JSON.stringify(auxUser));
          this.goToAdminDashboard(auxRes.first_name);
        }
      },
      err => {
        this.bSignIn = false;
        this.openSnackBar(this.snackMessage);
        this.loginForm.reset();
      }
      );
  }
  private myObservable() {
    const observable = Observable.create(observer => {
        observer.next();
        observer.complete();
    });
    return observable;
  } 

ValidateAdminCredential функция, которая имеет конечную точку и apiurl

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

* Небольшой пример стека, который я использую *

• https://stackblitz.com/edit/angular-nmencc

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

Answer 1

Вы можете использовать оператор shareReplay на наблюдаемой, чтобы поделиться ответом с несколькими подписчиками. Вам необходимо сохранить общую наблюдаемую информацию, которая может использоваться всеми подписчиками.

service.ts

// cache current http requests using the url as a key
private httpRequests = {};

// the service function that is subscribed
getData(): Observable<any> {
  const url = 'http://mock.com';

  // return ongoing request
  if (this.httpRequests[url]) {
    return this.httpRequests[url];
  }

  // cache and return new request
  return this.httpRequests[url] = this.makeHttpRequest(url).pipe(
    // share with all subscribers
    shareReplay(1),
    // remove cached request
    finalize(() => delete this.httpRequests[url])
  );
}

private makeHttpRequest(url): Observable<any> {
  return this.http.get(url);
}

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

DEMO: https://stackblitz.com/edit/angular-kxezk1

Answer 2

Используйте take из RxJS

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

Зачем использовать take?

Когда вас интересует только первая эмиссия, вы хотите использовать take. Может быть, вы хотите увидеть, на что пользователь впервые щелкнул, когда он зашел на страницу, или вы хотите подписаться на событие клика и просто сделать первый выпуск. Другой вариант использования - это когда вам нужно сделать снимок данных в определенный момент времени, но не требовать дополнительной эмиссии. Например, поток обновлений токенов пользователя или защита маршрута на основе потока в приложении Angular.

• Если вы хотите получить переменное число значений на основе некоторой логики c или другое наблюдаемое, вы можете использовать takeUntil или takeWhile!
• take - противоположность пропуска, где take будет принимать первое n номеров выбросов, в то время как пропуск пропускает первые n номеров выбросов.

Источник и примеры