如何在 Angular 2 Http Observable 请求上设置时间间隔
How to Set an Inteval on Angular 2 Http Observable Request
我做了一个 Angular 2 服务,它成功地从我的服务器获取数据。它有一个名为 getSinglePowerBlock
的函数。此函数的目标是设置一个可观察对象,以向给定的 URL 发出 get
请求,并且 return 来自 JSON 的 powerblock
元素之一属性 assets.powerblock[]
。我知道这很成功,因为我可以让它在我的一个组件中工作。我已经包含了那个组件,以供参考。
我的目标:
我希望我的代码使用 rxjs
库中的 interval
函数每秒一次连续调用 get
。然后,我希望我的本地数据使用来自每个轮询响应的数据进行更新。基本上,一个轮询解决方案。
我想这并不难,但我是 Observables 和 Rxjs 的新手,我似乎无法正确理解语法。请随意提供更好的方法来执行 getPowerBlock
函数或我调用它的方式。我敢肯定你在这方面比我聪明得多。
我只希望在该组件是用户正在查看的当前页面时进行轮询。
服务:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/Rx';
import { PowerBlock } from './classes/power-block';
@Injectable()
export class ServerCommsService {
private pbIndex: number = 0;
constructor (private http: Http) {}
getPowerBlock(): Observable<PowerBlock> {
return this.http
.get('/database-calls/getdata?type=powerblock')
.map((r: Response) => r.json().assets.powerblock[this.pbIndex] as PowerBlock);
}
}
使用服务的组件:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { PowerBlock } from '../classes/power-block';
import { ServerCommsService } from '../server-comms.service';
@Component({
moduleId: module.id,
selector: 'power-block',
templateUrl: 'power-block.component.html'
})
export class PowerBlockComponent implements OnInit {
public title: string = 'PowerBlock';
private powerBlock: PowerBlock;
constructor(
private server: ServerCommsService
) {}
ngOnInit(): void {
this.server.getPowerBlock().subscribe(
pb => this.powerBlock = pb,
err => {console.log(err)}
);
}
}
来自服务器的JSON
return:
{
"assets": {
"powerblock": [
{
"id": "001",
"name": "PB1",
},
{
"id": "002",
"name": "PB2",
}
]
}
}
我不认为在返回的 promise/observable 上调用间隔是明智的,但如果您只是返回数据(而不是 observable/promise),您可以在计时器内执行此操作角度2。它会在1秒后继续调用该函数
import {OnInit, OnDestroy} from '@angular/core';
在您的组件中创建订阅持有者变量
private timerSubscription: any; //just to hold the reference
您可以在 OnInit 事件中初始化计时器并在变量中取回订阅,以便稍后在 OnDestroy 中取消订阅。
ngOnInit()
{
//start a timer after one second
let timer = Observable.timer(1000, 1000);
this.timerSubscription = timer.subscribe((t:any) => {
//call your getPowerBlock function here
});
}
最后,销毁不再需要的订阅。
ngOnDestroy()
{
if(this.timerSubscription)
this.timerSubscription.unsubscribe();
}
我做了一个 Angular 2 服务,它成功地从我的服务器获取数据。它有一个名为 getSinglePowerBlock
的函数。此函数的目标是设置一个可观察对象,以向给定的 URL 发出 get
请求,并且 return 来自 JSON 的 powerblock
元素之一属性 assets.powerblock[]
。我知道这很成功,因为我可以让它在我的一个组件中工作。我已经包含了那个组件,以供参考。
我的目标:
我希望我的代码使用 rxjs
库中的 interval
函数每秒一次连续调用 get
。然后,我希望我的本地数据使用来自每个轮询响应的数据进行更新。基本上,一个轮询解决方案。
我想这并不难,但我是 Observables 和 Rxjs 的新手,我似乎无法正确理解语法。请随意提供更好的方法来执行 getPowerBlock
函数或我调用它的方式。我敢肯定你在这方面比我聪明得多。
我只希望在该组件是用户正在查看的当前页面时进行轮询。
服务:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/Rx';
import { PowerBlock } from './classes/power-block';
@Injectable()
export class ServerCommsService {
private pbIndex: number = 0;
constructor (private http: Http) {}
getPowerBlock(): Observable<PowerBlock> {
return this.http
.get('/database-calls/getdata?type=powerblock')
.map((r: Response) => r.json().assets.powerblock[this.pbIndex] as PowerBlock);
}
}
使用服务的组件:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { PowerBlock } from '../classes/power-block';
import { ServerCommsService } from '../server-comms.service';
@Component({
moduleId: module.id,
selector: 'power-block',
templateUrl: 'power-block.component.html'
})
export class PowerBlockComponent implements OnInit {
public title: string = 'PowerBlock';
private powerBlock: PowerBlock;
constructor(
private server: ServerCommsService
) {}
ngOnInit(): void {
this.server.getPowerBlock().subscribe(
pb => this.powerBlock = pb,
err => {console.log(err)}
);
}
}
来自服务器的JSON
return:
{
"assets": {
"powerblock": [
{
"id": "001",
"name": "PB1",
},
{
"id": "002",
"name": "PB2",
}
]
}
}
我不认为在返回的 promise/observable 上调用间隔是明智的,但如果您只是返回数据(而不是 observable/promise),您可以在计时器内执行此操作角度2。它会在1秒后继续调用该函数
import {OnInit, OnDestroy} from '@angular/core';
在您的组件中创建订阅持有者变量
private timerSubscription: any; //just to hold the reference
您可以在 OnInit 事件中初始化计时器并在变量中取回订阅,以便稍后在 OnDestroy 中取消订阅。
ngOnInit()
{
//start a timer after one second
let timer = Observable.timer(1000, 1000);
this.timerSubscription = timer.subscribe((t:any) => {
//call your getPowerBlock function here
});
}
最后,销毁不再需要的订阅。
ngOnDestroy()
{
if(this.timerSubscription)
this.timerSubscription.unsubscribe();
}