How does data fetching work in Vue 3's lifecycle?

How does data fetching work in Vue 3's lifecycle?

In Vue 3, data fetching typically occurs in lifecycle hooks like mounted or created. These hooks allow you to perform asynchronous operations after the component is created.

Can you give me an example of fetching data in the mounted hook?

Sure! Here's a simple example:

export default {
  data() {
    return {
      info: null
    };
  },
  async mounted() {
    const response = await fetch('https://api.example.com/data');
    this.info = await response.json();
  }
};

What if I want to handle errors during the fetch?

You can use a try-catch block to handle errors. Here's how you can modify the previous example:

async mounted() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network response was not ok');
    this.info = await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
  }
}