RxJS 5, Angular: Как делать запрос каждые x секунд, пока сообщение не соответствует определенной строке?

Question

Новое в Web-dev и Angular. Вот мой текущий код. Прямо сейчас все, что он делает, вызывает HTTP-запросы каждые 2 секунды и консоль регистрирует сообщение. Что я хочу, если сообщение соответствует строке «5», пусть отписаться. Кроме того, как я могу сделать это как не вложенные подписки? (Вложено ли прописывать плохую практику?). В настоящее время я использую Angular 5 и RXJS 5.

public checkProgress() {
   Observable
      .interval(2000)
      .subscribe(
        x => {
          this.myService.getStatus()
            .subscribe( data => console.log(data));
        }
      );
  }

Кроме того, если пользователь перейдет к другому компоненту, как отменить его подписку? ngOnDestroy

Answer 1

Есть несколько способов сделать это.Выберите:

Рекурсия - один вкладыш с троичным оператором

expand(val => val === "5" ? this.myService.getStatus().pipe(delay(2000)) : empty())

Рекурсия с takeWhile

expand(() => this.myService.getStatus().pipe(delay(2000)))
    .pipe(takeWhile(val => val !== "5"))

Интервал с takeWhile

timer(0, 2000)
    .pipe(
        switchMap(() => this.myService.getStatus()),
        takeWhile(val => val !== "5")
    )

Answer 2

Используйте тему, чтобы прекратить подписку с takeUntil

const { of, timer, Subject } = rxjs;
const { switchMap, takeUntil } = rxjs.operators;

const finalise$ = new Subject();
let finalised = false;

const finalise = () => {
  if (!finalised) {
    finalised = true;
    finalise$.next();
    finalise$.complete();
  }
};

const timer$ = timer(0, 2000); // Polling timer

const api$ = () => of(Math.random() * 5); // Simulate an api, just a random number

timer$.pipe(
  switchMap(_ => api$()),
  takeUntil(finalise$)
).subscribe(apiData => {
    console.log(apiData);
    if (apiData < 1) { // Condition to termitate
      finalise();
      console.log('finalised');
    }
});

// You can then call finalise in you OnDestroy method to kill the subscription

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.3.3/rxjs.umd.min.js"></script>