Accessing HTTP data through a function instead of using ngOnInit in Angular is a more efficient approach

Question

Accessing HTTP data through a function instead of using ngOnInit in Angular is a more efficient approach

Trying to retrieve data from a service using setInterval has posed an issue for me. When I call the service from ngOnInit, everything functions as expected. However, when attempting to call it from any other function, an error occurs:

"ERROR TypeError: Cannot read property 'get' of undefined"

public apiCall(mints:number){
   console.log("from setInterval"); 
//  console.log("api called");
//  this.refInrvl=setInterval(()=>{  
      this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(resp=>{
        this.storeD=resp;
      }); 
  //  },3000)
  }
  public refreshSearch(){
    console.log(this.refMints);
    this.setIntvl();

  }
  public refreshList(refMints:number){
    //this.refMints=refMints;
    console.log("Sel Number",this.refMints);
    this.setIntvl();
  }
  public setIntvl(){
  this.refInrvl=setInterval(this.apiCall,(this.refMints*300*60),this.refMints);
  }

angular typescript api

Answer 1

Answer №1

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class DataService {
baseUrl: string;
constructor(private http: HttpClient) {
    this.baseUrl = 'https://jsonplaceholder.typicode.com/posts';
}

public fetchData(): Promise<any> {
    return this.http.get<any>(this.baseUrl).toPromise();
}

To handle the promise, inject the service in any component's constructor and resolve the promise:

async getData() {
    await this.dataService.fetchData().then(res => console.log(res)).catch(err => console.log(err));
}

For better runtime performance and to handle unpredictable behavior of timed functions, it is recommended to use setTimeout or setInterval within the component itself.

refreshResponse(time: number) {
    setTimeout(async () => {
        await this.dataService.fetchData().then(res => console.log(res)).catch(err => console.log(err));
    }, time);
}
console.log(refreshResponse(3000));

Answer 2

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class DataService {
baseUrl: string;
constructor(private http: HttpClient) {
    this.baseUrl = 'https://jsonplaceholder.typicode.com/posts';
}

public fetchData(): Promise<any> {
    return this.http.get<any>(this.baseUrl).toPromise();
}

To handle the promise, inject the service in any component's constructor and resolve the promise:

async getData() {
    await this.dataService.fetchData().then(res => console.log(res)).catch(err => console.log(err));
}

For better runtime performance and to handle unpredictable behavior of timed functions, it is recommended to use setTimeout or setInterval within the component itself.

refreshResponse(time: number) {
    setTimeout(async () => {
        await this.dataService.fetchData().then(res => console.log(res)).catch(err => console.log(err));
    }, time);
}
console.log(refreshResponse(3000));

Accessing HTTP data through a function instead of using ngOnInit in Angular is a more efficient approach

Answer №1

Similar questions

Error in MatSort implementation - Argument cannot be assigned

The object's value may be 'undefined' after utilizing a switch case to ensure it is not undefined

When an Angular application is built in Electron and a div is printed, a blank window is

What could be causing the issues with SSL certificates when using Node.js/Express-TypeScript?

Having trouble with @viewChild not activating the modal popup and displaying an error message stating that triggerModal is not a function in

Error: Invalid connection string for ELF Lambda detected

Angular transforming full names to initials within an avatar

Guide on making a Mapped Type in TypeScript using dynamic generic parameters

Creating a read-only DIV using Angular - a step-by-step guide

Issue with Angular: boolean value remains unchanged

Having difficulty retrieving an angular file from a location outside of the asset folder

Cannot compile Angular 4 Material table: Encountering unexpected closing tag

Issue with Filtering Function in Kendo Angular 2 Grid

Retrieve data from a table within an Angular component

Change to a different text field without the need to press the tab key by utilizing

Error message "Cannot find children property on type IntrinsicAttributes & RefAttributes<unknown>" occurring in a React component due to a Typescript issue

JavaScript: exporting everything from ... causing excessive bloat in the build file

Utilizing props in styled-components: A beginner's guide

Creating a type definition for the createSelector function based on the useQuery result

Guide to creating jest unit test for an observable variable exclusively utilized in a template resulting in the error "Property 'pipe' of undefined cannot be read"