I want to use HTTP errors when my API reports an error that the client should handle nicely. In my 400 API response, I set the body to the error metadata, but all my axios catch statement returns is a generic 400 error string, not the response object where I could inspect and handle the error.
example
function (ent) {
return axios
.post(config.ROOT_API + '/api/backstory/', {new_parent_entity: ent, child_entity: this.entity})
.then(({data}) => {
console.log(data)
})
.catch((e) => {
console.log(e) // this returns
})
e is returned as as stack trace:
BackstoryUpdate.vue?8720:191 Error: Request failed with status code 400
at createError (createError.js?2d83:16)
at settle (settle.js?467f:17)
at XMLHttpRequest.handleLoad (xhr.js?b50d:62)
Whereas as the 400 response contained this body I want to access, e.g.,:
{error: "Circular reference detected", container: {id: 39, text: "abdef"}}
You need to access the response object within error.
function (ent) {
return axios
.post(config.ROOT_API + '/api/backstory/', {new_parent_entity: ent, child_entity: this.entity})
.then(({data}) => {
console.log(data)
})
.catch((e) => {
console.log(e.response) // this returns
})