Creating a list with axios in the ngOnInit lifecycle hook

Question

Creating a list with axios in the ngOnInit lifecycle hook

I have a feature where I need to populate objects fetched from the backend.

ngOnInit() {
        this.source.load(this.myService.findAll());
    }

Within myService, I am using Axios to retrieve data from the backend. I can confirm that the data is successfully reaching the frontend.

public findAll(): any {
        axios.get('http://localhost:8080/api/getAll')
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            })
    }

How can I invoke the service from the component to obtain an array of objects?

typescript axios promise

Answer 1

Answer №1

ngOnInit does not support async functionality, so you will need to execute your method in a fire-and-forget manner. In the code snippet below, I am using fetch instead of axios. However, the concept should be similar for axios.

If you are aware of the exact array you are expecting, you can replace Promise<any> with Promise<MyObject[]>. Make sure to add as MyObject[] after .json()

// Angular Component
ngOnInit() {
  (async () => {
    const data = await this.myService.findAll();
    this.source.load(data);
  })();
}

// MyService Class
public async findAll(): Promise<any> {
  try {
    const response = await fetch('http://localhost:8080/api/getAll');
    if (!response.ok) {
      throw new Error("Failed to fetch data");      
    }

    return await response.json();
  } catch (error) {
    throw new Error("Failed to fetch data");
  }
}

Answer 2

ngOnInit does not support async functionality, so you will need to execute your method in a fire-and-forget manner. In the code snippet below, I am using fetch instead of axios. However, the concept should be similar for axios.

If you are aware of the exact array you are expecting, you can replace Promise<any> with Promise<MyObject[]>. Make sure to add as MyObject[] after .json()

// Angular Component
ngOnInit() {
  (async () => {
    const data = await this.myService.findAll();
    this.source.load(data);
  })();
}

// MyService Class
public async findAll(): Promise<any> {
  try {
    const response = await fetch('http://localhost:8080/api/getAll');
    if (!response.ok) {
      throw new Error("Failed to fetch data");      
    }

    return await response.json();
  } catch (error) {
    throw new Error("Failed to fetch data");
  }
}

Creating a list with axios in the ngOnInit lifecycle hook

Answer №1

Similar questions

A data type labeled as 'undefined' needs to include a method called '[Symbol.iterator]()' which will then return an iterator

When using Protractor with Typescript, you may encounter the error message "Failed: Cannot read property 'sendKeys' of undefined"

The navigator.geolocation.watchPosition call did not return any available position information

Problems with the duration of Shadcn Toasts (Inspired by the react-hot-toast library)

What is the best way to implement useAsync (from the react-async-hook library) using TypeScript?

The ongoing ESLint conundrum: Balancing between "Unused variable" and "Unknown type" errors when utilizing imports for type annotations

Is there a way for me to program the back button to navigate to the previous step?

Limiting the use of TypeScript ambient declarations to designated files such as those with the extension *.spec.ts

Angular2 bootstrapping of multiple components

Combining switch statements from various classes

Is it possible for Typescript to automatically infer object keys based on the value of a previous argument?

Struggling with TypeScript errors when using Vue in combination with Parcel?

Challenges faced with the Nativescript Software Development Kit

When you import objects in Typescript, they may be undefined

Best Method for Confirming Deletion in Data Table with Shadow and UI

The issue encountered during a POST request in Postman is a SyntaxError where a number is missing after the minus sign in a JSON object at position 1 (line 1

What is the best way to add a repository in Nest.js using dependency injection?

Challenges with Type Casting in TypeScript

Suggestions for efficiently filtering nested objects with multiple levels in RXJS within an Angular environment?

Encountering a NullInjectorError in Angular while utilizing dynamic module federation when importing a standalone component along with