-1

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"}}
2

1 Answer 1

1

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
      })

Not the answer you're looking for? Browse other questions tagged or ask your own question.