Accessing the HTTP error body data in an axios catch clause

Question

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

See also https://stackoverflow.com/q/45017822/3001761, https://www.npmjs.com/package/axios#handling-errors, ... — jonrsharpe, Sep 26 '21 at 18:01

score 1 · Accepted Answer · answered Sep 26 '21 at 18:00

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

Accessing the HTTP error body data in an axios catch clause

1 Answers1