Angular 6 - метод запуска - сервис каждые 10 секунд

Question

У меня есть этот сервис, использующий HttpClient для получения некоторых данных:

checkData() {
    return this.http.get('my url');
}

В компоненте нижнего колонтитула я вызываю его и отображаю результат:

ngOnInit() {
    this.myservice.checkdata().subscribe( result => { this.statustext = result } );
}

Это работает, но янужно, чтобы этот метод запускался каждые 10 секунд, чтобы он был актуальным.

Как я могу это сделать?

Answer 1

Надеюсь, это поможет вам

export class YourComponent implements OnInit, OnDestroy {
  private alive: boolean;

  constructor(){}

  ngOnInit(){
    this.alive = true;
    TimerObservable.create(0, 10000)
      .pipe(
        takeWhile(() => this.alive)
      )
      .subscribe(() => {
        this.myservice.checkdata().subscribe( result => { this.statustext = result } );
      });
  }

  ngOnDestroy(){
    this.alive = false;
  }
}

Answer 2

Я имею в виду угловой 8:

Обратите внимание на разницу между таймером и интервалом.

Вы бы использовали таймер, если хотите отложить один вызов функции, но хотите использоватьинвертирование, если вы хотите запускать несколько вызовов функций последовательно с задержкой между: http://tutorials.jenkov.com/angularjs/timeout-interval.html

Я обнаружил следующий код, отсекаемый в этом сообщении в блоге: http://tutorials.jenkov.com/angularjs/timeout-interval.html

ngOnInit() {
    interval(5000)
      .pipe(
        startWith(0),
        switchMap(() => this.apiService.getTweets())
      )
      .subscribe(res => this.statuses = res.statuses})
    ;
  }

Answer 3

Используйте rxjs таймер для вызова API-запроса при запуске, а затем каждые 10 с.

Лучше всего это сделать, используя rxjs для разделения и завоевания.

Во-первых, импортируйте следующее:

import { timer, Observable, Subject } from 'rxjs';
import { switchMap, takeUntil, catchError } from 'rxjs/operators';

Затем добавьте свойство для обработки запроса к API:

private fetchData$: Observable<string> = this.myservice.checkdata();

Затем добавьте свойство для обработки времени:

private refreshInterval$: Observable<string> = timer(0, 1000)
.pipe(
  // This kills the request if the user closes the component 
  takeUntil(this.killTrigger),
  // switchMap cancels the last request, if no response have been received since last tick
  switchMap(() => this.fetchData$),
  // catchError handles http throws 
  catchError(error => of('Error'))
);

Наконец, запустить команду kill, если компонент убит:

ngOnDestroy(){
  this.killTrigger.next();
}

Вот демо StackBlitz .

Answer 4

Способ rxjs сделать это будет следующим:

import { interval } from 'rxjs/observable/interval';
import { map } from 'rxjs/operators';

const timeInterval$ = interval(10000);

timeInterval$.pipe(
  map( () => this.http.get(//some url);
);

Answer 5

Попробуйте с timer из RxJS:

import { Subscription, timer, pipe } from 'rjxs';
import { switchMap } from 'rxjs/operators';

subscription: Subscription;
statusText: string;

ngOnInit() {
    this.subscription = timer(0, 10000).pipe(
      switchMap(() => this.myservice.checkdata())
    ).subscribe(result => this.statustext = result);
}

ngOnDestroy() {
    this.subscription.unsubscribe();
}

interval(10000) из RxJS не подходит, потому что он начнет выдавать значения ТОЛЬКО через 10 секунд, а не сразу в первый раз (и я думаю,это не то, что вы ищете).

Однако timer(0, 10000) будет выдавать значения немедленно (0) и каждые 10 секунд (10000) до отмены подписки.

Answer 6

В вашем методе checkData вы можете сделать что-то вроде этого:

import { timer, of } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';

checkData() {
    return timer(0, 10000)
        .pipe(
           switchMap(_ => this.http.get('my url')),
           catchError(error => of(`Bad request: ${error}`))
        );
}

Тогда ваша подписка будет получать результат http-вызова каждые 10 секунд.

Answer 7

Вам просто нужно вставить свой код в функцию setInterval.

window.setInterval(() => {
  this.myservice.checkdata().subscribe( result => { this.statustext = result } );
}, 10000);