How to make an http call every 2 minutes with RXJS?

Question

I have a service that will make a call to my rest service every 2 minutes. On my service I have the following function

  getNotifications(token: string) {
     const body = 'xxxxxxxxx=' + token;
     return this.http.post('/rest/ssss/ddddddd/notificationcount', body, this.options)
          .map((res) => res.json());
  }

On my component I call my service function to call the API.

this.notificationService.getNotifications(this.token).subscribe((data) => {
  console.log(data);
});

I want to make this call every 2 minutes, what is the best way to do this?

score 75 · Accepted Answer · edited Apr 03 '21 at 15:27

Since you are already using Observables, simply make full use of it :) Obersvable.interval() is your good friend here:

In your component, do this:

Observable
    .interval(2*60*1000)
    .timeInterval()
    .mergeMap(() => this.notificationService.getNotifications(this.token))
    .subscribe(data => {
        console.log(data);
    });

Explanation:

.interval() creates an observable that emits an event every 2 minutes.
.timeInterval() convert an Observable that emits items into one that emits indications of the amount of time elapsed between those emissions.
.mergeMap() then wraps your each and every of service call, transform the results into an observable and return it. This ensure that the your service call at 0th, 2nd, 4th, 6th....minute is called synchronously. (think of there is a lot of .then()), i.e, service at 2nd minute will only be called on after the 0th minute's call, and 4th will only after 2nd, and so on.
.subscribe() finally you can subscribe to the data

Update:

If you are using pipeable operators (rxjs5 and above), simply pipe the operators instead of chaining them:

interval(2 * 60 * 1000)
    .pipe(
        mergeMap(() => this.notificationService.getNotifications(this.token))
    )
    .subscribe(data => console.log(data))

I've had a similar case with the one described in this question. What I need to know since I am newbie to Angular is whether this data can be rendered dynamically to page. Let's say that this data is an array of objects and I iterate through them on a table, would this table be updated with the 'new' data returned by the service every 2 minutes? — jkonst, Feb 03 '18 at 18:59
@jkonst yes. it will, as long as you bind the data correctly — CozyAzure, Feb 05 '18 at 02:30
@jkonst you can do that by using the async pipe in Angular 5 — rotemx, Feb 14 '18 at 22:29
@rotemx yes this is another approach. This way, data does not need to be an array of objects but the observable itself, so the above code needs to be modified. — jkonst, Feb 15 '18 at 11:28

score 13 · Answer 2 · answered Sep 27 '19 at 10:23

13

If you are using rxJs 6+, you can simlpy use interval method to do. like this -

import { interval } from 'rxjs';

interval(3000).subscribe(x => /* do something */)

answered Sep 27 '19 at 10:23

Pardeep Jain

84,110
37
165
215

Atif Saddique · Answer 3 · 2020-08-24T12:26:55.753

If you don't want to make an http call and simply want to do something after 2 minutes, then you can do something like below.

 Observable.interval(2*60*1000)
  .subscribe(() => {
    // do something.
    // or callSomeMethod();
  });

if you are using rxjs 6+ then you can do like this :

  interval(2*60*1000)
  .subscribe(() => {
    // do something.
    // or callSomeMethod();
  });

There is one more important thing you would like to do, You shoud destroy this observable once you leave your current page, because you don't want the extra computation going on behind the scene when these are not actually needed.

There are multiple options to unsubscribe from this observable.

You should save the reference to the observable and unsubscribe from it in onDestroy method.

 this.observableRef = Observable.interval(60000)
 .subscribe(() => {
   // do something
  });

 // call this method in OnDestroy method of the page.
 this.observableRef.unsubscribe();

OR use ngx-take-until-destroy

 Observable.interval(60000)
 .takeUntil(this.destroyed$)
 .subscribe(() => {
   //  do something
 });

score 0 · Answer 4 · answered Jul 21 '20 at 11:15

I had a similar need.can be useful to someone and hence writing it here.My Angular version is 9.1.5. I am checking if the user is logged in and sending a http request every 10 minutes until the user is in that component.

 const secondsCounter = interval(60000); //Refreshes every 10 minutes
 secondsCounter
 .pipe(
   tap(console.log),
   takeWhile(x => this.notificationService.isLoggedIn()),
   flatMap(() => this.notificationService.getNotifications(this.token))
 ).subscribe()

score 0 · Answer 5 · answered Dec 22 '20 at 15:26

Small my example with limit of execution time and manual stop by result

this.insalesXlsSubject.pipe(
  switchMap((job_id: string) => {
    return interval(1000).pipe(
      mergeMap((i) => {
        return this.http.get(`${environment.backend}/${this.route.snapshot.params.insales_app_name}/api/make_insales_xls?job_id=${job_id}`)
      }),
      tap((y: any) => {
        if (y.status == 'finished') {
          this.insalesXlsStatusSubject.next()
        }
      }),
      takeUntil(race([
        this.insalesXlsStatusSubject,
        timer(60 * 1000).pipe(
          takeUntil(
            this.insalesXlsStatusSubject
          )
        )
      ]))
    )
  })
).subscribe()

Rahul Singh · Answer 6 · 2017-06-28T17:56:17.933

-1

import {Observable} from 'rxjs/Rx';

  Observable.interval(2 * 60 * 1000).subscribe(x => {
    callyourmethod();
  });

Update After comment

this.interval = setInterval(() => {
        this.yourservicecallmethod();
    }, 2 * 60 * 1000);

edited Jun 28 '17 at 17:56

answered Jun 28 '17 at 17:48

Rahul Singh

19,030
11
64
86

Presumably he wants an observable which emits a new HTTP response every two minutes. – Jun 28 '17 at 17:53

How to make an http call every 2 minutes with RXJS?

6 Answers6

Update:

Linked

Related