[英]Angular - How to add an access token from an observable to an outgoing HTTP request?
[英]How to Set an Inteval on Angular 2 Http Observable Request
我做了一个Angular 2服务,该服务成功地从服务器获取了数据。 它具有一个名为getSinglePowerBlock
函数。 该函数的目标是设置一个可观察的对象,以使get
请求到达给定的URL,并从JSON属性assets.powerblock[]
返回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
:
{
"assets": {
"powerblock": [
{
"id": "001",
"name": "PB1",
},
{
"id": "002",
"name": "PB2",
}
]
}
}
我认为在返回的promise / observable上调用一个间隔不是很明智,但是如果您只是返回数据(不是observable / promise),则可以在angular2的计时器中执行此操作。 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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.