如何在 Angular 2 Http Observable 请求中设置间隔

Posted 2023-02-24

【中文标题】如何在 Angular 2 Http Observable 请求中设置间隔

【英文标题】：How to Set an Inteval on Angular 2 Http Observable Request

【发布时间】：2017-01-25 23:22:07

【问题描述】：

我创建了一个 Angular 2 服务，它成功地从我的服务器获取数据。它有一个名为getSinglePowerBlock 的函数。此函数的目标是设置一个可观察对象以向给定 URL 发出 get 请求，并从 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",
            
        ]
    

【问题讨论】：

How To Do Polling with Angular 2 Observables的可能重复

【参考方案1】：

我认为在返回的 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();

【讨论】：

感谢您的快速回复。用 Observable 还是 Promise 做这种事情更好？

我认为在 observable 上执行此操作并不明智，但如果您只是返回数据（不是 observable/promise），您可以执行此操作。 1秒后会持续池化

如果我只想在组件是当前页面时开启计时器怎么办？

组件中的定时器只会在它加载到任何页面时执行，你只需要确保你在ngOnDestroy中销毁它