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
– matiaslauriti, Commented Apr 9, 2021 at 23:40

Sølve · Accepted Answer · 2021-04-09 18:33:20Z

3

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.
};

edited Apr 9, 2021 at 18:33

answered Apr 9, 2021 at 18:19

Sølve

4,5062 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

matiaslauriti Over a year ago

Best answer, but I recommend (to the question's author) to not change the default Axios' behavior. It will confuse anyone else that is used to this default...

Collectives™ on Stack Overflow

VueJS, Axios, Laravel - catch errors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related