VueJS, Axios, Laravel - catch errors

Question

I am using the following code to post something to Laravel:

        upload: async function() {     

        response = await axios.post(url, data, {
            headers: {
                'Content-Type': 'multipart/form-data',
            }
        }).catch(function(error) {
            console.log(error.response.data.errors);
        });

(Unrelated code omited)

This works overall when Laravel returns 200. If I return 401, 422 or something from Laravel Axios throws an error in the console and the whole method stops running.

I've always considered this a very non-developer-friendly behavior - am I not understanding it? Returning different status codes from your backend API is supposed to help reading the response in Vue, but Vue/Axios treat every non-200 response as a fatal error.

How can I catch the error - do something (and bind $this to the callback) and then continue with the method without killing the whole script?

If you read the accepted HTTP codes, axios is doing what is should do. Do you think a redirect (3xx) is a successful response from an API ? How about 4xx/5xx ? If your code stops working when you get a 4xx, that's because you are doing something wrong, you are using async/await in a bad way, you have to use try/catch and not await + js.catch... That is why your code stops working... — matiaslauriti

Sølve Tornøe Sølve Tornøe · Accepted Answer · 2021-04-09T18:19:07

The reason is that Axios default has a validator function like this:

 validateStatus: function (status) {
    return status >= 200 && status < 300; // default
 },

Status codes 300 and above and less than 200 will make axios throw.

You can make it not throw (stop the further execution) by either:

try..catch:

try {
    response = await axios.post(url, data, {
        headers: {
            'Content-Type': 'multipart/form-data',
        }
    });
} catch (error) {
    this.doSomething() // this is available here
}

.catch on axios:

axios.post(url, data, {
    headers: {
        'Content-Type': 'multipart/form-data',
    }
}).catch(error => {
    console.log(error.response.data.errors);
});

NOTE: This is different to your example due to not using async/await

Error callback:

axios.post(url, data, {
    headers: {
        'Content-Type': 'multipart/form-data',
    }
}, error => {
    console.log(error.response.data.errors);
})

If you do not want Axios to force you that status codes above 300 will throw, you can make change the default axios validator:

axios.defaults.validateStatus = (status) => {
    return status === 200; // your own logic here to throw or not.
};

VueJS, Axios, Laravel - catch errors

1 Answers