Axios.catch 不捕获网络/控制台错误 [重复]

Question

我正在使用带有 axios 和 redux-promise 的 React。 Axios 似乎没有捕获 404 错误，如下所示。

这是代码。

 const url = FIVE_DAY_FORECAST_URL.replace("{0}", city);

  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
     return Promise.reject(error);
  });

  try{
    const request = axios.get(`${url}`).then(e => { 
       debugger; }).catch(
      e => {
        debugger;
        return "ERROR"; // THIS FIRES, BUT DOES NOT STOP THE CONSOLE ERROR
      });
      debugger;
    return {
      type: FETCH_FIVE_DAY_FORECAST,
      payload: request
    };
  } catch {
    debugger;
    console.log("Error!");  // DOES NOT HELP AS THE 404 IS NOT A JAVASCRIPT ERROR, IT'S A VALID SERVER RESPONSE
  }
}

我正在使用多种技术来捕获控制台错误：

• .then() ==> 代码运行通过这个块，但是错误已经发生，并且已经写入控制台！

• .catch() ==> 如果未配置拦截器，即注释掉 axios.interceptors.response.use...，代码将通过此块运行。

• try...catch ==> 无效（不捕获网络响应，因为这不是真正的 javascript 错误！）

Answer 1

当使用try...catch 和axios 时，您必须明确声明错误响应，像这样

catch(error) {
  console.log('[error]', error.response);
  // use the error.response object for some logic here if you'd like
}

否则只返回字符串值。

使用该响应对象，您可以利用一些逻辑来根据特定错误执行某些操作。更多信息可以在这里找到https://github.com/axios/axios/issues/960

我希望这会有所帮助。

Answer 2

您正在尝试捕获 Promise.reject 并将其包装在 try...catch 中。只有其中一个会起作用。

您可以捕获一个 Promise 拒绝或将 Promise 包装在 try...catch 中，然后在 Promise 拒绝时抛出一个新错误并将其捕获到 catch 块中。

试试这个代码

const url = FIVE_DAY_FORECAST_URL.replace("{0}", city);

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
   return Promise.reject(error);
});

try {
  const request = axios.get(`${url}`)
  .then(
    response => {
      debugger;
    })
    .catch(
    e => {
      debugger;
      throw e // throw the error and catch it
    });
    debugger;
  return {
    type: FETCH_FIVE_DAY_FORECAST,
    payload: request
  };
} catch {
  debugger;
  // Now you can catch the error in catch block
  console.log("Error!");
}

// or you can't write async/await code
// make the the function is marked as `async`

try {
  const response = await axios.get(`${url}`)
  return {
    type: FETCH_FIVE_DAY_FORECAST,
    payload: response
  };
} catch (e) {
  console.error("Error happened during fetch");
  console.error(e);
}