Question

我每天花9个小时在Angular上尝试主要用服务做一些小项目。今天，我正在尝试创建一个循环数据获取的服务，并且组件根据新数据自行更新。我喜欢使用该服务的6个组件，并且标准方法可以使得只有一个组件的请求多6倍。

我听说过IntervalObservable，但我不知道如何在组件方面实现它。（也许我在服务中也失败了......）

这是一些代码。

app.module.ts：

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }    from '@angular/http';

import { AppComponent } from './app.component';


import { ROUTING } from './app.routes';
import {HardwareService} from "./services/hardware.service";
import {AfficheurComponent} from "./components/hardware/afficheur.component";
import {HardwareListComponent} from "./views/hardwarelist/hardwarelist.component";


@NgModule({
    imports: [ BrowserModule, ROUTING, HttpModule, FormsModule],
    declarations: [
        AppComponent,
        AfficheurComponent,
        HardwareListComponent
    ],
    bootstrap: [ AppComponent ],
    providers: [ HardwareService ]
})
export class AppModule { }

hardware.service.ts：

import { Injectable }              from '@angular/core';
import { Headers, Http, Response }          from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/interval'

@Injectable()
export class HardwareService{
    private apiUrl = 'http://10.72.23.11:5000';  // URL to web API

    constructor (private http: Http) {}

    getHardware(){
        return Observable.interval(5000)
            .flatMap(() => {
                return this.http.get(this.apiUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
        });
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || { };
    }
    private handleError (error: Response | any) {
        // In a real-world app, you might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}

afficheur.component.ts：

import { Component } from '@angular/core';
import {HardwareService} from "../../services/hardware.service";

@Component({
    selector: 'afficheur',
    templateUrl: 'app/components/hardware/afficheur.component.html'
})
export class AfficheurComponent{
    public state: Boolean;
    constructor(private service: HardwareService){
        this.service
            .getHardware()
            .subscribe(data => (console.log(data), this.state = data.afficheur),
                error => console.log(error),
                () => console.log('Get etat afficheur complete'))
    }
}

我获取了有关IntervalObservable here (SO thread)

的信息

一如既往，我希望你能帮助我找到解决这个问题的方法：）。

ERROR TypeError: Observable_1.Observable.interval is not a function

问候，Jérémy。

（PS：英语不是我母语，如果我告诉你不明白的话，请不要犹豫告诉我）

Answer 1

解决方案看起来像：

// create an observable which fetch the data at intervals of 1 second
this._data$ = Observable
  .timer(0, 1000)
  .switchMap(() => this.getData())
  // if an error is encountered then retry after 3 seconds
  .retryWhen(errors$ => {
    errors$.subscribe(error => this.logError(error));
    return errors$.delay(3000);
  })
  .share();

timer(0, 1000) - 在0ms后产生第一个值，然后以1秒的间隔产生。使用interval(1000)代替即可，但第一个值将延迟1秒。
switchMap(() => this.getData()) - 切换到查询实际资源的回调提供的observable
retryWhen(...) - 如果遇到错误，则记录错误然后重试
share() - 在订阅者中共享一个订阅。这样做只会调用getData()一次，而不是为我们可能拥有的订阅者调用它。

示例 - 发出当前日期，当连续第5次调用getData()时，会抛出错误以便测试错误情况。

以下是工作 Plunker 。

<强> HardwareService

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/timer';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/retry';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/switchMap';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class HardwareService {

  private _fetchCount = 0;
  private _fetchCount$ = new Subject<number>();
  private _data$: Observable<Date>;

  public get data$(): Observable<Date> {
    return this._data$;
  }

  public get fetchCount$(): Observable<number> {
    return this._fetchCount$;
  }

  constructor() {
    // create an observable which fetch the data at intervals of 1 second
    this._data$ = Observable
      .timer(0, 1000)
      .switchMap(() => this.getData())
      // if an error is encountered then retry after 3 seconds
      .retryWhen(errors$ => {
        errors$.subscribe(error => this.logError(error));
        return errors$.delay(3000);
      })
      .share();
  }

  private logError(error) {
    console.warn(new Date().toISOString() + ' :: ' + error.message);
  }

  private getData(): Observable<Date> {

    this._fetchCount++;
    this._fetchCount$.next(this._fetchCount);

    // from time to time create an error, after 300ms
    if (this._fetchCount % 5 === 0) {
      return Observable.timer(300).switchMap(() => Observable.throw(new Error('Error happens once in a while')));
    }

    // this will return current Date after 300ms
    return Observable.timer(300).switchMap(() => Observable.of(new Date()));
  }
}

<强> AfficheurComponent

import {Component, Input, OnInit} from '@angular/core';
import {HardwareService} from '../services/hardware.service';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-afficheur',
  templateUrl: './afficheur.component.html',
  styleUrls: ['./afficheur.component.css']
})
export class AfficheurComponent implements OnInit {

  @Input()
  public label: string;

  public data$: Observable<string>;

  constructor(private hardwareService: HardwareService) {
    this.data$ = hardwareService.data$.map(item => this.label + ' - ' + item.toISOString());
  }

  ngOnInit() {
  }
}

AfficheurComponent模板

<div style="margin-top: 10px;">{{ data$ | async }}</div>

<强>用法

<app-afficheur label="afficheur 1"></app-afficheur>
<app-afficheur label="afficheur 2"></app-afficheur>
<app-afficheur label="afficheur 3"></app-afficheur>
<app-afficheur label="afficheur 4"></app-afficheur>
<app-afficheur label="afficheur 5"></app-afficheur>
<app-afficheur label="afficheur 6"></app-afficheur>

<div style="margin-top: 10px">
  Times called: {{ hardwareService.fetchCount$ | async }}
</div>

可观察的http服务

1 个答案: