How can I handle errors in Vue.js using Axios?

How can I handle errors in Vue.js using Axios?

You can handle errors in Vue.js with Axios by using the .catch() method after your request. This allows you to catch any errors that occur during the request.

Can you show me an example of that?

Sure! Here's a simple example:

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

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

You can set a state variable to hold the error message and display it in your template. For example:

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

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    this.errorMessage = 'Failed to load data. Please try again later.';
  });