Axios catch error returns javascript error not server response
Problem
Im trying to catch validation errors from the server. Code: axios.post('/formulas/create', { name: "", parts: "" }) .then( (response) => { console.log(response) }, (error) => { console.log(error) } ); Console log output Error: Request failed with status code 422 at createError (app.js:6765) at settle (app.js:29489) at XMLHttpRequest.handleLoad (app.js:6600) Network tab output {"name":["The name field is required."],"parts":["The parts field is required."]} I should be seeing an object that contains JSON form validation as that is the response in my network tab, i seem to get the JS catch output? Also tried the following: axios.post('/formulas/create', { name: "", parts: "" }) .then(response => { console.log(response) }) .catch(error => { console.log(error) }); Same result More people seem to have the same problem using the same enviroment as me here. https://laracasts.com/discuss/channels/vue/issues-with-axios-catch-method - Axios version: ^0.16.2 - VueJS 2.3.4 - Vue-template-compiler 2.3.4 - Laravel-mix - Environment: node v6.4.0, chrome 58, Mac OSX 10.12.4
Error Output
Error: Request failed with status code 422
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Axios catch error returns javascript error not server response
I have exactly the same environment. Try this: [code block] Modify from `console.log(error)` to `console.log(error.response)` in `catch`. You can also use a global interceptor and reject only the `error.response`. The problem is when the `console.log` tries to output the error, the string representation is printed, not the object structure, so you do not see the `.response` property.
Trust Score
12 verifications
- 1
I have exactly the same environment. Try this:
I have exactly the same environment. Try this:
- 2
Modify from `console.log(error)` to `console.log(error.response)` in `catch`.
Modify from `console.log(error)` to `console.log(error.response)` in `catch`.
- 3
You can also use a global interceptor and reject only the `error.response`. The
You can also use a global interceptor and reject only the `error.response`. The problem is when the `console.log` tries to output the error, the string representation is printed, not the object structure, so you do not see the `.response` property.
Validation
Resolved in axios/axios GitHub issue #960. Community reactions: 2287 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep