axios-fetch won't let me intercept 401 failed requests

[lifeomic]

axios-fetch won't let me intercept 401 failed requests

[mdlavin]

I've never seen axios-auth-refresh before. Seems like a very practical helper library. I'm not sure about why it wouldn't work, but I'd be happy to review a PR if you have an environment to reproduce and debug the problem.

[SimeonC]

We had the same issue and I eventually tracked it down to this here;

axios-fetch/src/index.js

Line 26 in bb0031b

validateStatus: () => true

This line basically stops axios from entering the "error" side of the interceptors chain.

What it should be is this; https://github.com/axios/axios/blob/c7329fefc890050edd51e40e469a154d0117fc55/lib/defaults.js#L79-L81

Which would correctly enter the "error" side of the response interceptor.

I think the reason this line was added was due to the usage of await rather than promises?

[hogpilot]

I ran into this same issue and agree with @SimeonC that validateStatus: () => true is the culprit. I think the reason it was there is because of the way the Fetch API is implemented:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

I think a fix would be to remove the custom validateStatus (and thus default to the one referenced by @SimeonC), and wrap the request in a try...catch instead:

axios-fetch/src/index.js [starting at line 21]

 const config = transfomer({
    url: input,
    method: init.method || 'GET',
    data: init.body instanceof FormData ? init.body : String(init.body),
    headers: lowerCasedHeaders,
    // validateStatus: () => true
  }, input, init);

  // const result = await axios.request(config);
  let result;
  try {
    result = await axios.request(config);
  } catch (err) {
    result = err.response;
  }

I'll submit a PR with this change for review.