How to fetch data after a particular time interval while using rxjs observables in angular for dynam-CodePudding

I am trying to fetch data from an api and update it dynamically in my angular application using RxJs Observables, The problem with my code is that the api which I am using has a limit on the number of requests that can be made per hour. how can I modify my service and component in such a way that the data is dynamically fetched and updated after a particular time for eg. 5 minutes?

Service Code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable, Subject } from 'rxjs';
import { tap } from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class ApiserviceService {

  constructor(private http: HttpClient) { }
  private _refreshreq = new Subject<void>();

  get refresh(){
    return this._refreshreq;
  }
  getfng(): Observable<object>{
    return this.http.get('https://api.testapi.com/fng/').pipe(
      tap(()=>{
        this.refresh.next();
      })
    )
  }
  getcdata() : Observable<object>{
    return this.http.get('https://api.testapi.com/v2/data/').pipe(
      tap(()=>{
        this.refresh.next();
      })
    )
  }
}

Component code:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiserviceService } from '../services/apiservice.service';

@Component({
  selector: 'app-homecomponent',
  templateUrl: './homecomponent.component.html',
  styleUrls: ['./homecomponent.component.css']
})
export class HomecomponentComponent implements OnInit {
  fngdata: any;
  value: any;
  class: any;
  datarray: any;
  ngOnInit(): void {
    this.getfngindex();
    this.getdata();
    this.service.refresh.subscribe(response=>{
      this.getfngindex();
      this.getdata();
    })
  }
  constructor(private service: ApiserviceService) { }
  getfngindex(){
    return this.service.getfng().subscribe((data:any)=>{
      this.fngdata = data.data[0]
      console.log(this.fngdata);

      this.value =this.fngdata.value
      this.class =this.fngdata.value_classification
    })
  }
  getdata(){
    return this.service.getcdata().subscribe((data:any)=>{
      this.datarray = data.data;
      console.log(this.datarray[0]);
    })
  }

}

CodePudding user response：

When calling an observable you could simply use the repeat operator with the given delay option.

So for example in your getdata method you could simply do the following:

const FIVE_MINUTES_MS =  5 * 60 * 1_000;

this.service.getcdata()
  .pipe(
    repeat({ delay: FIVE_MINUTES_MS })
  )
  .subscribe((data:any) => {
    this.datarray = data.data;
      console.log(this.datarray[0]);
  })

This will trigger indefinitely, but if you want to limit the number of calls you could also set a count property

You can find more about repeat here

CodePudding user response：

I made the following changes in the Component ts file's ngOnInit() code to get the functionality I wanted:

Component Code:

import { interval } from 'rxjs';
ngOnInit(): void {
    this.getfngindex();
    this.getdata();
    const datatimelimit = interval(60000) //fetches and updates the data after every 1 minute
    const fngtimelimit = interval(4*60*60*1000) //fetches and updates the data after every 4 hours
    datatimelimit.subscribe(response=>{
      this.getdata();
    })
    fngtimelimit.subscribe(response=>{
      this.getfngindex();
    })
  }