CODEWITHSUNDEEP
javascriptreactjsaxios
tinyVariant
tinyVariant

Reputation: 45

Trying to access error response 500 axios

I am not able to access the response of error - 500 in axios

export const dowloadFilePDF = (data) => {
  return axios
    .request({
      method: 'GET',
      url: `${basePath + data[0]}`,
      responseType: 'blob',
      headers: { Authorization: Authorization },
    })
    .then(response => {
      console.log(response)
      let fileName = response.headers['content-disposition']?.split(';')[1]?.split('=')[1]?.split('"').join('')
      fileName = fileName ? fileName : 'data.pdf'
      fileDownload(response.data, fileName)
    })
    .catch((error) => {
      console.log(error.response.data)
    })
}

I am not getting the response instead its returning as

data : Blob {size: 215, type: 'application/json'}

Upvotes: 1

Views: 2553

Answers (2)

Seyed-Amir-Mehrizi
Seyed-Amir-Mehrizi

Reputation: 739

the best way to catch errors instead of trying a lot of lines of code in the catch method by promise is using the tools in the Axios names interceptor.

interceptor has two property request and response. In response we can simulate the errors status and based on the status code we can do whatever we want. for example :

axios.interceptors.response.use(null, error => {
console.log("error : " , error);
const expectedError = error.response && error.response.status >= 400 && 
 error.response.status < 500;
if (expectedError) {
    return Promise.reject(error);
}
alert("unexpected error is happen");
});

if you need more help here is the original link

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074038

According to the documentation, you can't assume error.response will be filled in. Here's the code the documentation shows with the inline comments explaining it:

Handling Errors

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

There's another aspect to this as well: You're calling catch on the promise returned by then, not on the promise returned by axios. If the axios promise is rejected, you'll reach that rejection handler, but you'll also reach it if the axios promise is fulfilled but then your fulfillment handler throws an error (or returns a promise it ultimately rejects). In that latter case, the error probably won't have a response property at all.

Upvotes: 2

Related Questions