Question

我使用HttpClient来获取一些数据：

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

在页脚组件上我调用它并显示结果：

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

这样可行，但我需要每10秒运行一次这样的方法，以便它是最新的。

我该怎么做？

Answer 1

使用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 Demo。

Answer 2

尝试使用RxJS中的timer：

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();
}

来自RxJS的

interval(10000)是不合适的，因为它将在10秒后开始发出值，而不是第一次立即发出（而且我认为这不是你正在寻找的）。

然而，timer(0, 10000)将立即发出值（0）和每10秒（10000），直到取消订阅。

Answer 3

在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}`))
        );
}

然后您的订阅将每隔10秒获得一次http呼叫的结果。

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

希望这会对你有所帮助

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 6

我指的是角度8：

请注意计时器和间隔之间的区别。

如果要延迟单个函数调用，可以使用计时器，但是如果要依次触发多个函数调用且延迟时间为http://tutorials.jenkov.com/angularjs/timeout-interval.html

，则可以使用倒数计时器

我在此博客文章中发现了以下代码：http://tutorials.jenkov.com/angularjs/timeout-interval.html

private final Pattern hasSpecialChar = Pattern.compile("[^A-Za-z0-9!@#$%^&*]+");
if (hasSpecialChar.matcher(password).find()) {
    return "String allows only !@#$%^&* special characters";
}

Answer 7

您可以使用这种非常简单的方法

ngOnInit() {
this.doMonitoring();
}

doMonitoring() {
 setTimeout(() => {
  console.log('do some action!');
  //better to have one if here for exiting loop!
  this.doMonitoring();
 }, 1500);
}

Answer 8

您可以使用非常简单的setInterval

setInterval(console.log('hi'), 10000);

这每10秒运行一次

Answer 9

您只需要在setInterval函数中插入代码。

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

Angular 6 - run方法每10秒服务一次

9 个答案: