Can you provide instructions on how to use RXJS Observables to conduct a service poll?

Question

Can you provide instructions on how to use RXJS Observables to conduct a service poll?

If I want the get request to "api/foobar" to repeat every 500 milliseconds, how can I modify the code provided below?

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));
    }
}

angular typescript rxjs observable polling

Answer 1

Answer №1

Ensure that you have correctly imported {Observable} from rxjs/Rx. Failure to import this may result in an 'observable not found' error at times.

View the functional plnkr example here: 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 = [];
  pollingData: any;      

  constructor(http: Http) {
   this.pollingData = 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
        });
  }

 ngOnDestroy() {
    this.pollingData.unsubscribe();
}
}

Answer 2

Ensure that you have correctly imported {Observable} from rxjs/Rx. Failure to import this may result in an 'observable not found' error at times.

View the functional plnkr example here: 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 = [];
  pollingData: any;      

  constructor(http: Http) {
   this.pollingData = 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
        });
  }

 ngOnDestroy() {
    this.pollingData.unsubscribe();
}
}

Answer 3

Answer №2

Give this a shot:

const fetchData = () => {
    return Observable.interval(2000)
        .switchMap(() => this.http.get(url).map(res:Response => res.json()));
}

Answer 4

Give this a shot:

const fetchData = () => {
    return Observable.interval(2000)
        .switchMap(() => this.http.get(url).map(res:Response => res.json()));
}

Answer 5

Answer №3

Have you considered using setTimeout() instead?

setTimeout(fetchData(), 1000);

Answer 6

Have you considered using setTimeout() instead?

setTimeout(fetchData(), 1000);

Can you provide instructions on how to use RXJS Observables to conduct a service poll?

Answer №1

Answer №2

Answer №3

Similar questions

The module "<file path>/react-redux" does not contain an exported member named "Dispatch"

Alter the style type of a Next.js element dynamically

The operation of assigning the value to the property 'baseUrl' of an undefined object cannot be executed

Guide on implementing ng2-completer with translation features

Does @angular/router have a similar function to ui-router's transition.from()?

Sorting Angular data using database queries

Serving Django and Angular with Apache

Ways to selectively deactivate client-side functionality

Setting checkbox values using patchValue in Angular programming

Can you effectively leverage a prop interface in React Typescript by combining it with another prop?

Show variously colored information for each selection from the dropdown using Angular Material

What are the top tips for creating nested Express.js Queries effectively?

Is the validator in my Angular reactive form malfunctioning?

Could Angular be automatically applying margins or padding to my component?

Tips for concealing a dynamic table element in Angular 9

Typescript has a knack for uncovering non-existent errors

Error message: Module 'firebase/app' not found in angular framework

Error: Visual Studio unable to locate Firebase node module

The inclusion of Angular 2 router queryParams in the URL is not happening

Animating multiple elements in Angular 2 using a single function