How can I handle API errors in Vue.js?

How can I handle API errors in Vue.js?

You can handle API errors in Vue.js by using try-catch blocks in your async methods or by using the .catch() method with Promises.

Can you give 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 handling errors globally?

For global error handling, you can use Axios interceptors. This allows you to catch errors for all requests in one place.

Can you show me how to set up an Axios interceptor?

Absolutely! Here's how you can set it up:

axios.interceptors.response.use(
  response => response,
  error => {
    console.error('Global API error:', error);
    return Promise.reject(error);
  }
);