react axios then works but catch doesn't work

Question

I've read the following questions but I couldn't find the solution.

I wanna to get errors 400, 500, ... someone has said you should catch in then but I tried it and nothing happened. for test I wrote a function to get error 404, 400, ...

export const myAxios = url => {
  Axios.get(url)
    .then(response => {
      // Success
      console.log("then response ", response);
    })
    .catch(error => {
      // Error
      if (error.response) {
        console.log("error respone", 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("erros request: ", error.request);
      } else {
        // Something happened in setting up the request that triggered an Error
        console.log("Error message", error.message);
      }
      console.log("errors config : ", error.config);
    });
};

axios doesn't catch errors and browser console logs this:

xhr.js:172 GET http://localhost:3000/app/..../choices 404 (Not Found)
dispatchXhrRequest @ xhr.js:172
xhrAdapter @ xhr.js:11
dispatchRequest @ dispatchRequest.js:59
Promise.then (async)
request @ Axios.js:53
Axios.<computed> @ Axios.js:68
wrap @ bind.js:9
myAxios @ textaxios.js:4
(anonymous) @ List.jsx:14
commitHookEffectList @ react-dom.development.js:22030

Any tips or help will be appreciated.

packages:

   "axios": "^0.19.0"
   "react": "^16.12.0"

Are you sure it's not logging this `console.log(error.request);` ? you have no way of knowing, try adding some text to the other error logs you have to rule that out. — segFault, Feb 15 '20 at 14:17
Done but it's not logging, is it related to local? I'm working on my project in local host now. — Hamid Shoja, Feb 15 '20 at 14:22
reading https://stackoverflow.com/questions/38798451/how-to-catch-and-handle-error-response-422-with-redux-axios, it could be that axios is parsing the error into a response. Can you try `console.log("error", error)` in the catch? Another thing that may be worth trying is using an interceptor, similar to the one mentioned by VSG24 in https://github.com/axios/axios/issues/960 — Dom Slee, Feb 15 '20 at 14:32
In addition to the above, what version of axios are you using? There was a change a couple years ago to add `validateStatus` config option so without that change it may be sending you to your `.then` callback on 4XX responses. — segFault, Feb 15 '20 at 14:35
Your code seems to be working fine. Here is a [codesandbox](https://codesandbox.io/s/practical-hopper-jt96x) that replicates it. You should be seeing the error in console. The only strange thing that I see is that `Axios` with capitalized A. How is `Axios` defined exactly? — mgarcia, Feb 15 '20 at 15:05
Actually as other friend said it should works fine, but in my localhost it just works when response is 200, and no error catches when it has error — Hamid Shoja, Feb 15 '20 at 18:43

score 0 · Answer 1 · answered Feb 15 '20 at 15:18

Your code seems fine, perhaps it's the local endpoint (resource) that you're trying to get to?

Here's an example using an example placeholder service:

document.getElementById('btn-valid').addEventListener('click', () => {
  // Valid URL
  myAxios('https://jsonplaceholder.typicode.com/todos/1')
})

document.getElementById('btn-invalid').addEventListener('click', () => {
  // Invalid URL
  myAxios('https://jsonplaceholder.typicode.com/todus/1')
})

const myAxios = url => {
  axios.get(url)
    .then(response => {
      console.log('success', response);
    })
    .catch(error => {
      console.log('error', error)
    })
}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<button id="btn-invalid">Invalid URL</button>
<button id="btn-valid">Valid URL</button>

Additionally, you can try using Axios interceptors to 'intercept' requests or responses before they're handled by then or catch:

axios.interceptors.response.use(response => {
        // Any status code that lie within the range of 2xx cause this function to trigger
        // Do something with response data
        console.log('inside interceptor success')
        return response;
      }, error => {
        // Any status codes that falls outside the range of 2xx cause this function to trigger
        // Do something with response error
        console.log('inside interceptor error')
        return Promise.reject(error);
      });

react axios then works but catch doesn't work

1 Answers1