Poll API using Angular HTTP Observable

Question

In my component html, I am using the asyncPipe to subscribe to this http service. The service maps the json response object to an array of class instances. This all works great, but I would like http service to poll every few seconds. I've tried a bunch of things (like interval), but it seems RXJS is a bit of a minefield at the moment. Has anyone implemented this kind of thing using Angular 6?

fetch(command, params?) {
    return this.http.post(`http://localhost:4000/${command}`, params)
      .pipe(
        map((data: Data) => {
          const statuses: Status[] = [];
          for (const statusKey of Object.keys(data.statuses)) {
            const newStatus = new Status(
               // do some object translation...
           );
           statuses.push(newStatus);
          }
        return statuses;
        })
      )
      .pipe(
        catchError(EpisodeApiService.handleError)
      );
  }

Community · Accepted Answer · 2019-08-05 08:32:14Z

3

This should be as simple as the following:

    pollInterval = 5000;
    const httpObservable = interval(pollInterval).pipe(
    switchMap(x => fetch(command, params?) )
   );

The pollInterval may be changed according to the requirements. interval and switchMap should be imported as follows:

import { interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

Using switchMap here helps to cancel any delayed pending http requests, this is good for performance particularly during intermittent Internet connections. That is why the RxJS reactive way of doing this is preferred over traditional methods such as setInterval().

Also a subscription should be made finally, otherwise nothing will happen:

httpObservable.subscribe(x => {});

edited Aug 5, 2019 at 8:32

CommunityBot

11 silver badge

answered Jun 27, 2018 at 6:07

siva636

16.5k25 gold badges103 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ideeps Over a year ago

It works well but when there is some error in the http api the whole interval breaks and it no longer repeats.

khush · Accepted Answer · 2018-06-27 06:30:00Z

0

You can also do like this if you dont want to use rxjs

 setInterval(function(){
      serviceObj.httpObservable.subscribe(x => {});
    }, 10000)

answered Jun 27, 2018 at 6:30

khush

2,8072 gold badges18 silver badges36 bronze badges

Collectives™ on Stack Overflow

Poll API using Angular HTTP Observable

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related