How can I handle API errors in Vue 3?

How can I handle API errors in Vue 3?

In Vue 3, you can handle API errors using try-catch blocks in async functions or by using the .catch method with Promises.

Can you show me an example of using try-catch?

Sure! Here's a simple example:

async fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    this.data = response.data;
  } catch (error) {
    console.error('API Error:', error);
    this.errorMessage = 'Failed to fetch data.';
  }
}

What about using .catch with Promises?

You can do it like this:

axios.get('https://api.example.com/data')
  .then(response => {
    this.data = response.data;
  })
  .catch(error => {
    console.error('API Error:', error);
    this.errorMessage = 'Failed to fetch data.';
  });

How can I display the error message in the template?

You can use a conditional rendering in your template like this:

<div v-if="errorMessage">{{ errorMessage }}</div>