2017-01-15 37 views
10

Учитывая следующий код, как его изменить, чтобы запрос на получение «api/foobar» повторялся каждые 500 миллисекунд?Как сделать опрос с угловыми 2 наблюдаемыми

import {Observable} from "RxJS/Rx"; 
import {Injectable} from "@angular/core"; 
import {Http} from "@angular/http"; 

@Injectable() export class ExampleService { 
    constructor(private http: Http) { } 

    getFooBars(onNext: (fooBars: FooBar[]) => void) { 
     this.get("api/foobar") 
      .map(response => <FooBar[]>reponse.json()) 
      .subscribe(onNext, 
        error => 
        console.log("An error occurred when requesting api/foobar.", error)); 
    } 
} 
+0

Я ответил на аналогичный вопрос здесь http://stackoverflow.com/a/42659054/2398593, и дело в том, что я не использую 'interval', потому что если ваш вызов займет более 500 мс, будет уволен другой. Мой ответ решает эту проблему :) – Maxime

ответ

20

убедитесь, что вы импортируемый импортом {Observable} из 'rxjs/Rx' если мы не будет импортировать его мы получаем наблюдаемые не найдены ошибку иногда

рабочей plnkr http://plnkr.co/edit/vMvnQW?p=preview

import {Component} from '@angular/core'; 
import {Http} from '@angular/http'; 
import 'rxjs/Rx'; 
import {Observable} from 'rxjs/Rx'; 

@Component({ 
    selector: 'app', 
    template: ` 
     <b>Angular 2 HTTP polling every 5 sec RxJs Observables!</b> 
     <ul> 
     <li *ngFor="let doctor of doctors">{{doctor.name}}</li> 
     </ul> 

     ` 
}) 

export class MyApp { 
    private doctors = []; 

    constructor(http: Http) { 
    Observable.interval(5000) 
    .switchMap(() => http.get('http://jsonplaceholder.typicode.com/users/')).map((data) => data.json()) 
     .subscribe((data) => { 
      this.doctors=data; 
      console.log(data);// see console you get output every 5 sec 
     }); 
    } 
} 
+0

Как вы остановите интервал? Это продолжается каждые 5 секунд и не останавливается. – GravyPlaya

+0

реализовать ngOnDestroy() и отменить подписку на компонент, уничтожаемый –

+2

Это может быть опасно - если запросы занимают больше 5000, при следующем запуске switchMap он отменяет предыдущий запрос. Таким образом, если все ваши запросы занимают больше 5000, то каждый из них отменит следующий, и вы не получите никаких опросов. (5000 должно быть безопасным, но 500 будет слишком маленьким) –

-5

Почему бы не попробовать setInterval()?

setInterval(getFooBars(), 500); 
+0

Почему этот ответ был проголосован? Читателям, как я, будет интересно, почему этот ответ «плохой». –

+4

он был опущен, потому что это регулярный интервал, который не использует наблюдаемый шаблон, тогда как вопрос заключается в том, как использовать механизм опроса (интервала) с наблюдаемыми. Кроме того, использование метода setInterval должно принудительно выполнять функцию getFooBars для запуска и запуска API каждые 500 мс, которые нельзя отменить, вернул ли ответ или нет. С помощью наблюдаемых выполнение api может быть отменено, когда снова будет запущен один и тот же api. – yaloumi

2

Попробуйте

return Observable.interval(2000) 
     .switchMap(() => this.http.get(url).map(res:Response => res.json())); 
+0

Благодарим вас за ответ. Мне казалось, что это сработает. Однако я получаю эту ошибку: 'EXCEPTION: Observable_1.Observable.interval не является функцией'. Я использую RxJS версии 5-бета. Может ли это вернуться к версии 4, разрешит это? –

+0

Я думаю, вы можете в файле package.json –

0

Я рекомендую библиотеку, абс rx-polling трактует множество деталей, предоставляет механизмы для повторных попыток, стратегии отступления и даже приостанавливает/возобновляет, если вкладка браузера становится неактивной.