I'm making a script to fetch some data from my api:

const success = (response) => {
  console.log(response);
};

const failed = (error) => {
  console.log(error);
};

axios.$http.get('/somedata')
  .then((response) => {
    success(response.data);
  })
  .catch((error) => {
    failed(error);
  });

/somepage is a non-existing page so it returns a 404. But the catch is not handling this. Why not? In my console I have the error TypeError: Cannot read property 'data' of undefined. Why does it not run the failed() function? I don't understand.

I'm making a script to fetch some data from my api:

const success = (response) => {
  console.log(response);
};

const failed = (error) => {
  console.log(error);
};

axios.$http.get('/somedata')
  .then((response) => {
    success(response.data);
  })
  .catch((error) => {
    failed(error);
  });

/somepage is a non-existing page so it returns a 404. But the catch is not handling this. Why not? In my console I have the error TypeError: Cannot read property 'data' of undefined. Why does it not run the failed() function? I don't understand.

• javascript
• exception
• promise
• catch-block

Share Improve this question Follow asked Dec 2, 2016 at 22:40 JordyJordy 4,7951212 gold badges5151 silver badges8282 bronze badges 7

• Possible duplicate of Promise : then vs then + catch – CMedina Commented Dec 2, 2016 at 22:58
• what version of axios are you using? – roger Commented Dec 2, 2016 at 23:00
• Latest version: 0.15.2 – Jordy Commented Dec 2, 2016 at 23:01
• seems this has potentially been an issue in the past, take a look at this thread: github./mzabriskie/axios/issues/41 and maybe check out what your 'validateStatus' config is set to (information on that can be found in the README: github./mzabriskie/axios/blob/master/README.md) – roger Commented Dec 2, 2016 at 23:12
• Thank you, see my own answer. You pointed me in the right direction ;) – Jordy Commented Dec 2, 2016 at 23:21

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 1

Found out it was related to a custom interceptor handling 401-errors (but not 404 errors)...

Judging by the error message, it looks like "success(response.data);" is being called. Is it possible the server is successfully returning a page that says something like "Error 404" rather than actually returning http response code 404?

You could impliment a check for 404s.

axios.$http.get('/somedata')
  .then(response => {
    if(response.status !== 404) //or any status code really
        success(response.data);
    else
        failed(response)
  })
  .catch((error) => {
    failed(error);
  });

Then again what you probably want to check for is to make sure it's a 200 that returns.

axios.$http.get('/somedata')
  .then(response => {
    if(response.status === 200)
        success(response.data);
    else
        failed(response)
  })
  .catch((error) => {
    failed(error);
  });