How do I handle errors in async functions in Vue.js?

How do I handle errors in async functions in Vue.js?

In Vue.js, you can handle errors in async functions using try-catch blocks. Would you like an example?

Yes, please provide an example of using try-catch in a Vue component.

Sure! Here's a simple example:

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

What if I want to show a user-friendly message instead of logging the error?

You can set a data property to display a user-friendly message in your template. For example, use this.errorMessage to show the error in your UI.