call and wait in interval using subscribe in Angular 6

Question

I call a method every 10000 time. I want to make this function getAllNotificationsActed0() invoked every 10 seconds and if the data did not come within this interval, do not call the function again. If the data is received within 10 seconds the function is called, if the data has not come within 10 sec of the function, do not call but wait.

service.ts

public NotifGetAllActedNoActive(): Observable<Notifications[]> {
  let headers = new Headers();
  headers.append('x-access-token', this.auth.getCurrentUser().token);
  return this.http.get(Api.getUrl(Api.URLS.NotifGetAllActedNoActive), {
    headers: headers
  })
    .map((response: Response) => {
      let res = response.json();
      if (res.StatusCode === 1) {
        this.auth.logout();
      } else {
        return res.StatusDescription.map(notiff => {
          return new Notifications(notiff);
        });
      }
    });
}

component.ts

ngOnInit() {
  this.subscription = Observable.interval(10000).subscribe(x => {
    this.getAllNotificationsActed0();
  });
}

getAllNotificationsActed0() {
  this.notif.NotifGetAllActedNoActive().subscribe(notification0 => {
    this.notification0 = notification0;
    if (this.isSortedByDate) {
      this.sortbydate();
    }
  });
}

Any idea please?

Dmitriy Snitko · Accepted Answer · 2018-09-12T09:47:54.747

3

Try this in your component:

import { takeUntil } from 'rxjs/operators';
import { Subject, timer } from 'rxjs';

private _destroy$ = new Subject();
ngOnInit() {
    this.getAllNotificationsActed0();
}
ngOnDestroy() {
    this._destroy$.next();
}
getAllNotificationsActed0() {
    this.notif.NotifGetAllActedNoActive()
     .pipe(takeUntil(this._destroy$))
     .subscribe(notification0 => {
        this.notification0 = notification0;
        if (this.isSortedByDate) {
            this.sortbydate();
        }
        timer(10000).pipe(takeUntil(this._destroy$))
            .subscribe(t => this.getAllNotificationsActed0() );
    });
}

It's a good approach to stop pipe on component destroy. You can use Subject object to achive this. Also you can stop any pipes you have to stop on component destruction.

edited Sep 12 '18 at 09:47

answered Sep 11 '18 at 14:31

Dmitriy Snitko

931
5
14

Your answer works good for me, one problem: Destroy Timer doesn't work for me. I update my post. Thnx – Sep 12 '18 at 08:55
Have you any idea please? – Sep 12 '18 at 09:34
I'v updated my answer, to achive your goal. Hope I clearly understood you. – Dmitriy Snitko Sep 12 '18 at 09:42
@w.site can you upvote or accept my answer if it was usefull. – Dmitriy Snitko Sep 12 '18 at 10:17

Raja Mohamed · Answer 2 · 2018-09-11T15:02:06.680

0

Try this

You can keep a flag to find the waiting request

//New Flag
requestWaiting : boolean = false;

public NotifGetAllActedNoActive(): Observable<Notifications[]> {
let headers = new Headers();
headers.append('x-access-token', this.auth.getCurrentUser().token);
return this.http.get(Api.getUrl(Api.URLS.NotifGetAllActedNoActive), {
  headers: headers
})
  .map((response: Response) => {
    this.requestWaiting = false;
    let res = response.json();
    if (res.StatusCode === 1) {
      this.auth.logout();
    } else {
      return res.StatusDescription.map(notiff => {
        return new Notifications(notiff);
      });
    }
 });
}

use the flag in the place where you calling the method inside interval

ngOnInit() {
  this.subscription = Observable.interval(10000).subscribe(x => {
     if(!this.requestWaiting){
         this.requestWaiting = true;
         this.getAllNotificationsActed0();
     }
  });
}
  getAllNotificationsActed0() {
    this.notif.NotifGetAllActedNoActive().subscribe(notification0 => {
      this.notification0 = notification0;
      if (!this.isSortedByDate) {
        this.sortbydate();
      }
    });
  }

The already triggered observable will wait until the response received. I hope it will help you

edited Sep 11 '18 at 15:02

answered Sep 11 '18 at 14:23

Raja Mohamed

1,026
9
22

Thank you for your answer. I try this code, but the function `NotifGetAllActedNoActive()` doesn't call in this interval – Sep 11 '18 at 16:02
Any idea please? – Sep 12 '18 at 07:53
where you resolving your observable? – Raja Mohamed Sep 12 '18 at 09:29
`import { Observable, Subscription } from 'rxjs/Rx';` – Sep 12 '18 at 09:30
can i use Observable.interval(10000) in service end and component continue watch on service for data change – Venkatesh Parihar Oct 19 '18 at 06:39

call and wait in interval using subscribe in Angular 6

2 Answers2