How do I handle errors in async functions in Vue 3?

How do I handle errors in async functions in Vue 3?

In Vue 3, you can handle errors in async functions using try-catch blocks. Here's a simple example:

async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    // Handle the error appropriately
  }
}

What if I want to show an error message to the user?

You can use a reactive property to store the error message and display it in your template. For example:

data() {
  return {
    errorMessage: null,
  };
},

async fetchData() {
  try {
    const response = await axios.get('/api/data');
    return response.data;
  } catch (error) {
    this.errorMessage = 'Failed to fetch data.';
  }
}

Can I use Vue's built-in error handling features?

Yes, Vue 3 provides an errorCaptured lifecycle hook that you can use to catch errors in child components. This can be useful for centralized error handling.

What about using a global error handler?

You can set up a global error handler using Vue's config.errorHandler. This allows you to handle errors globally across your application.