How can I handle 404 errors in Axios with Vue.js?

How can I handle 404 errors in Axios with Vue.js?

You can handle 404 errors in Axios by using a try-catch block or by utilizing the .catch() method on your Axios request.

Can you show me an example of how to implement that?

Sure! Here's a simple example:

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response && error.response.status === 404) {
      console.error('Resource not found!');
    } else {
      console.error('An error occurred:', error);
    }
  });

What if I want to display a custom message to the user?

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

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

axios.get('/api/data')
  .then(response => {
    this.errorMessage = '';
  })
  .catch(error => {
    if (error.response && error.response.status === 404) {
      this.errorMessage = 'Sorry, the resource you are looking for does not exist.';
    }
  });

Thanks! Is there a way to handle other HTTP errors as well?

Yes, you can handle other HTTP errors by checking the error.response.status in the catch block and displaying appropriate messages for different status codes.