Как сделать опрос в Angular с помощью Rxjs?

Опрос - ›Процесс проверки его готовности или, другими словами, повторное обращение к серверу, а когда он будет готов, обработайте окончательные данные.

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

Мы можем сделать этот опрос в Angular, используя библиотеку RxJs (Reactive Extensions for JavaScript).

Я задействую API с помощью функций HttpClient и RxJs в Angular 7 и проверю, выполняется ли обработка, каждые 3 секунды я проверяю статус обработки, независимо от того, завершена она или нет. Если из бэкэнда, когда я получал, обработка завершена, то с этого момента я не буду нажимать API, поскольку обработка завершена.

Давайте импортируем функции, которые нужно использовать для опроса.

import { concatMap, map, switchMap, filter, take} from 'rxjs/operators';
import { timer, BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

Для Hit API необходимо импортировать модуль HttpClient.

const url$ = this.http.get('my-api-url');// api url 
this.loading$.pipe(         
    switchMap(_ => timer(0, 3000).pipe( 
      concatMap(_ => url$),           
      map((response: ServerResponse) => {            
            return response;
      })
     ).pipe(filter(data => data.generated===true))                  
     .pipe(take(1)
     )
    )
    .subscribe(()=> {console.log('done')})

В приведенных выше функциях я вызываю API каждые 3 секунды после получения ответа, а затем регистрирую свой статус как «готово». ServerResponse - это интерфейс, на который мы получаем тип ответа от API.

Теперь я объединю весь код в один файл, т.е. файл ts (файл логики в версиях Angular 2+).

import { concatMap, map, switchMap, filter, take} from 'rxjs/operators';
import { timer, BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
export interface ServerResponse{
  generated: boolean
}
export class AppComponent implements OnInit {
  loading$ = new BehaviorSubject('');
constructor(private http: HttpClient) { }
ngOnInit() {
      const url$ = this.http.get('my-api-url');
      this.loading$.pipe(
         switchMap(_ => timer(0, 3000).pipe(
           concatMap(_ => url$),
           map((response: ServerResponse) => {
            return response;
           })
         ).pipe(filter(data => data.generated===true))
         .pipe(take(1))
        )
      )
      .subscribe(()=> {console.log('done')})
  }
ngOnDestroy(): void {
    /**
    * Unsubscribe all subscriptions to avoid memory leak
    */
    //here will do unsubscribe
  }
}

Теперь приведенный выше код выполняет опрос с использованием функций RXJS. Другой способ, мы также можем использовать функцию `setInterval`, а затем создать переменную с именем‘ isDone ’и установить значение false при обработке, и эта переменная должна быть проверена перед обращением к API.

Удачного кодирования с использованием RXJS и Angular. 😊