HTTP每x秒请求Angular每x秒

我试图在Angular2中每X秒刷新HTTP调用。

  ionViewDidLoad() {
    let loader = this.LoadingController.create({
      'content':'Please Wait'
    });
    loader.present().then(()=>{
      this.http.request('http://mywebserver.com/apps/random.php').map(res=> res.json()).subscribe(data=>{
        console.log(JSON.stringify(data));
        loader.dismiss();
        this.fact = data;
      },err=>{
        loader.dismiss();
        let alert = this.alertCtrl.create({
          title: 'Error!',
          subTitle: 'Please check your Internet Connectivity',
          buttons: ['OK']
        });
      alert.present();
    })
    })
  }

我在新加载页面时获取数据。但是现在我的问题是刷新HTTP调用，以获取每x秒

获取新数据

我将创建一个单独的服务来制作您的http请求：

@Injectable()
export class RandomService {
  constructor(http: HttpClient) { }
  getRandom() {
    return this.http.get('http://mywebserver.com/apps/random.php');
  }
}

现在，您可以简单地调用setInterval内部的randomService.getRandom()，但是您也可以使用可观察的操作（例如有Observable.interval）在ionViewDidLoad中为您处理此操作：

async function ionViewDidLoad() {
  let loader = this.LoadingController.create({
    content: 'Please Wait',
  });
  await loader.present();
  // x number of seconds
  this.interval$ = interval(x).pipe(
    // make first request right away; otherwise we have to wait x seconds before first one
    startWith(),
    // cancel previous request if it had not finished yet
    switchMap(() =>
      // catch the error inside to allow for a retry each time
      // you could also use `.catch` on the entire observable stream which will
      // cancel it if there's an error.
      this.randomService.getRandom().catch(err => {
        console.error(err);
        this.alertCtrl
          .create({
            title: 'Error!',
            subTitle: 'Please check your Internet Connectivity',
            buttons: ['OK'],
          })
          .present();
      }),
    ),
  );
  this.interval$.subscribe(data => this.fact = data);
  // Separate observable to dismiss loader on first emission
  this.interval$.pipe(first()).subscribe(() => loader.dismiss());
}
ionViewWillUnload() {
  this.interval$.unsubscribe();
}

注意：这是假设使用RXJS 5.5，并使用HttpClient Angular。您可能没有这些，但是您仍然可以做一些非常相似的事情。您只是无法与可Littable操作员一起管道，如果您不使用HttpClient，您仍然必须执行我在服务中要做的.map(data => data.json())。

最后，如this.interval$所示，请避免存储并手动取消订阅。相反，您可能会执行诸如this.fact$ = interval(x)...之类的操作，然后在模板中您可以进行*ngFor="let fact of (fact$ | async)"，而不必手动订阅。

使用observable.interval：

import {Observable} from 'rxjs/Rx';
...
constructor(...) {
  Observable.interval(30000).subscribe(x => { // will execute every 30 seconds
    this.ionViewDidLoad();
  });
}

或您的ionViewDidLoad功能：

Observable.interval(3000)
          .timeInterval()
          .flatMap(() => this.http.request('http://mywebserver.com/apps/random.php')
          .map(res=> res.json())
          .subscribe(data=>{
              console.log(JSON.stringify(data));
              loader.dismiss();
              this.fact = data;
            });

编辑以回答您的评论。来自RXJS文档：

TimeInterval操作员将可观察到的源转换为可观察到的迹象表明，可观察到的源的连续排放。第一个排放从这个新的可观察到观察者订阅可观察的时间和时间当源可观察的发射第一项时。没有相应的排放标志着在源可观察到的最后发射以及随后的电话迎面
TimeInterval默认情况下在超时调度程序上运行具有一个变体，可让您通过传递来指定调度程序作为参数。

基本上，在这种情况下，它将是JavaScript的本机setInterval()函数的反应性/RXJS。

相关内容

最新更新

热门标签：