Angular2 http以一定间隔

4 回答

• 31

  正如@Adam和@Ploppy所提到的，现在不推荐使用Observable.interval（），而不是创建这样的observable的首选方法 . 执行此操作的首选方法是通过IntervalObservable或TimerObservable . [目前在Typscript 2.5.2，rxjs 5.4.3，Angular 4.0.0]

  我想在这个答案中添加一些用法，以证明我在Angular 2框架中找到了最好的方法 .

  首先是你的服务（通过'ng g service MyExample“命令在angular cli中创建） . 假设服务是RESTful（http get request返回一个json）：

  我-example.service.ts

  import { Injectable } from '@angular/core';
  import { Http, Response} from "@angular/http";
  import { MyDataModel } from "./my-data-model";
  import { Observable } from "rxjs";
  import 'rxjs/Rx';
  
  @Injectable()
  export class MyExampleService {
    private url = 'http://localhost:3000'; // full uri of the service to consume here
  
    constructor(private http: Http) { }
  
    get(): Observable<MyDataModel>{
      return this.http
        .get(this.url)
        .map((res: Response) => res.json());
    }
  }
  

  ***查看Angular 5 ***服务的最新更新

  现在你的组件代码（'ng g component MyExample'）：

  我-example.component.ts：

  import { Component, OnDestroy, OnInit } from '@angular/core';
  import { MyDataModel } from "../my-data-model";
  import { MyExampleService } from "../my-example.service";
  import { Observable } from "rxjs";
  import { IntervalObservable } from "rxjs/observable/IntervalObservable";
  import 'rxjs/add/operator/takeWhile';
  
  @Component({
    selector: 'app-my-example',
    templateUrl: './my-example.component.html',
    styleUrls: ['./my-example.component.css']
  })
  export class MyExampleComponent implements OnInit, OnDestroy {
    private data: MyDataModel;
    private display: boolean; // whether to display info in the component
                              // use *ngIf="display" in your html to take
                              // advantage of this
  
    private alive: boolean; // used to unsubscribe from the IntervalObservable
                            // when OnDestroy is called.
  
    constructor(private myExampleService: MyExampleService) {
      this.display = false;
      this.alive = true;
    }
  
    ngOnInit() {
      // get our data immediately when the component inits
      this.myExampleService.get()
        .first() // only gets fired once
        .subscribe((data) => {
          this.data = data;
          this.display = true;
        });
  
      // get our data every subsequent 10 seconds
      IntervalObservable.create(10000)
        .takeWhile(() => this.alive) // only fires when component is alive
        .subscribe(() => {
          this.myExampleService.get()
            .subscribe(data => {
              this.data = data;
            });
        });
    }
  
    ngOnDestroy(){
      this.alive = false; // switches your IntervalObservable off
    }
  }
  

  ===编辑===

  更新了组件ts代码以通过TimerObservable合并订阅：

  import { Component, OnDestroy, OnInit } from '@angular/core';
  import { MyDataModel } from "../my-data-model";
  import { MyExampleService } from "../my-example.service";
  import { Observable } from "rxjs";
  import { TimerObservable } from "rxjs/observable/TimerObservable";
  import 'rxjs/add/operator/takeWhile';
  
  @Component({
    selector: 'app-my-example',
    templateUrl: './my-example.component.html',
    styleUrls: ['./my-example.component.css']
  })
  export class MyExampleComponent implements OnInit, OnDestroy {
    private data: MyDataModel;
    private display: boolean; // whether to display info in the component
                              // use *ngIf="display" in your html to take
                              // advantage of this
  
    private alive: boolean; // used to unsubscribe from the TimerObservable
                            // when OnDestroy is called.
    private interval: number;
  
    constructor(private myExampleService: MyExampleService) {
      this.display = false;
      this.alive = true;
      this.interval = 10000;
    }
  
    ngOnInit() {
      TimerObservable.create(0, this.interval)
        .takeWhile(() => this.alive)
        .subscribe(() => {
          this.myExampleService.get()
            .subscribe((data) => {
              this.data = data;
              if(!this.display){
                this.display = true;
              }
            });
        });
    }
  
    ngOnDestroy(){
      this.alive = false; // switches your TimerObservable off
    }
  }
  

  ===编辑===

  my-example-service.ts（使用HttpClient和Angular 5）：

  import { Injectable } from '@angular/core';
  import { HttpClient} from "@angular/common/http";
  import { MyDataModel } from "./my-data-model";
  import { Observable } from "rxjs";
  import 'rxjs/Rx';
  
  @Injectable()
  export class MyExampleService {
    private url = 'http://localhost:3000'; // full uri of the service to consume here
  
    constructor(private http: HttpClient) { }
  
    get(): Observable<MyDataModel>{
      return this.http
        .get<MyDataModel>(this.url);
    }
  }
  

  注意改变使用HttpClient而不是Http（在angular5中不推荐使用）和get方法，它允许将响应解析到我们的数据模型中，而不必使用rxjs .map（）运算符 . 当角度5的服务改变时，组件代码保持不变 .

  回复于 2024-05-21T11:40:53+08:00
• 18

  您可以在Angular2中使用 Observable 的 interval 方法 .

  import {Component,Input} from 'angular2/core';
  import {Observable} from 'rxjs/Rx';
  
  @Component({
    selector: 'my-app',
    template: `
      <div>
        {{message}}
      </div>
    `
  })
  export class AppComponent {
    constructor() {
      Observable.interval(500)
            .take(10).map((x) => x+1)
            .subscribe((x) => {
              this.message = x;
            }):
    }
  }
  

  这是相应的plunkr描述：https://plnkr.co/edit/pVMEbbGSzMwSBS4XEXJI?p=preview .

  基于此，您可以插入HTTP请求：

  initializePolling() {
    return Observable
       .interval(60000)
       .flatMap(() => {
         return this.dataService.getData('url'));
       });
  }
  

  回复于 2024-05-21T11:40:53+08:00
• 8

  由于最近rxjs / observable的更改，我认为这个答案不再有效你现在必须使用IntervalObservable .

  https://github.com/ReactiveX/rxjs/blob/master/src/observable/IntervalObservable.ts

  import { IntervalObservable } from 'rxjs/observable/IntervalObservable';
  
  @Component({
    ...
  })
  export class AppComponent {
    n: number = 0;
    constructor() {
      IntervalObservable.create(1000).subscribe(n => this.n = n);
    }
  }
  

  回复于 2024-05-21T11:40:53+08:00
• 81

  对于TypeScript（答案时为1.8.10）/ angular2（答案时为rc1）和rxjs@5.0.0（答案时为beta.6），您需要使用扩展 Observable 类的 IntervalObservable

  import {IntervalObservable} from 'rxjs/observable/IntervalObservable'
  
  IntervalObservable.create(5000).take(10).map((x) => x + 1)
  

  回复于 2024-05-21T11:40:53+08:00