Axios causes javascript error even in catch block

Question

I'm sending a POST request with Axios to my RESTful API which returns HTTP 422 in certain cases. I expect Axios to catch those errors in 'catch' block, the code enters in that but a javascript error is logged as well in browser console.

My sample request is like below. It enters the first "if" (if (error.response)) as expected but also creates a javascript error which breaks the rest of the code.

        this.Axios.post('<api_url>', data)
        .then(function (response) {
            console.log(response);
        })
        .catch((error) => {
            if (error.response) {
                // The request was made and the server responded with a status code
                // that falls out of the range of 2xx
                self.setState((prevState) => {
                    return {
                        form_state: {
                            error: true,
                            message: error.response.data
                        }
                    };
                });
            } else if (error.request) {
                self.setState((prevState) => {
                    return {
                        form_state: {
                            error: true,
                            message: error.request
                        }
                    };
                });                    
            } else {
                self.setState((prevState) => {
                    return {
                        form_state: {
                            error: true,
                            message: error.message
                        }
                    };
                });                     
            }
            console.log(error.config);
        });

Am I missing something?

Thanks

What JavaScript error are you getting? Can you set s breakpoint and step by step walk and see where ourt breaks? Or at the very least, wrap that critical block on another try catch and see the error. — Zlatko, Mar 28 '18 at 18:59
It says, POST 422 (UNPROCESSABLE ENTITY), as my API returns but the thing here is, I'm expecting axios to catch this error (because it enters in the catch block) so I can show a proper error message to user. — Deniz Alpaslan, Mar 28 '18 at 19:29
@DenizAlpaslan *Axios causes javascript error even in catch block* - which error and where do you have it displayed? The question should state clearly what uncaught error message and `error` object are. The question lacks clear problem statement, it's unclear what's going on and what the problem is. Code-related questions should contain http://stackoverflow.com/help/mcve . — Estus Flask, Mar 28 '18 at 19:43
There is no problem. Your JavaScript works fine. The devtools just try to be helpful by logging any HTTP errors. — Bergi, Mar 28 '18 at 19:56
weird, it is definitely misleading. but ok, thanks for the info @Bergi — Deniz Alpaslan, Mar 28 '18 at 20:00

Axios causes javascript error even in catch block

0 Answers0