Javascript Axios.catch不捕获网络/控制台错误

我正在使用React with axios和redux promise。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，则代码将在此块中运行。使用…

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

---

使用

try…catch

和

axios

时，您必须明确说明错误响应，如下所示

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

否则它只返回字符串值

有了这个响应对象，您就可以根据特定的错误利用一些逻辑来做一些事情。更多信息可以在这里找到

---

我希望这会有所帮助。

您正在努力抓住承诺。拒绝并将其包装在

try…catch

中。这其中只有一个可行

您可以捕获承诺拒绝，或者将承诺包装在一个

try…catch

中，并在承诺拒绝上抛出一个新错误，然后在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);
}

---

它只是在调试控制台上显示一条消息，但它不是arror，不会中断代码执行。您的代码似乎按预期工作，而日志消息确实是一个问题？同意，它“工作”，但环境被红色污染，这并不是真正的应用程序错误情况。随着这个应用程序的发展，我不希望它在没有任何错误的地方发出噪音。@Banoona然后不要尝试获取不存在的资源，或者当你的意思不同时不要发送404错误。顺便说一句，您可以在控制台中隐藏消息。谢谢@Bergi。但这并不是问题的答案。是的，我可以限制选项（例如通过下拉列表）。但这不是重点。javascript接口应该能够优雅地捕获404错误。“找不到”是一个有效的响应，因此我应该能够捕获它并向用户显示“找不到位置”（控制台日志中没有任何噪音）此外，它不是我的API，因此我无法控制返回的状态代码。@Banoona您的javascript能够并且确实捕获404错误，您可以随意优雅地处理它（向用户显示消息）。这与控制台是否有用无关。用户不关心控制台日志。Hi Mark。谢谢，但不确定这是否真的解决了问题。问题是catch语句没有抑制登录到控制台的红色错误消息（这发生在它进入catch块之前，因此超出了我的控制）异步操作不起作用：控制台仍然记录404，我们得到：redux.js:192 Uncaught（in promise）错误：操作必须是普通对象。使用自定义中间件进行异步操作。在调度时（redux.js:192）在索引时。js:57在调度时（redux.js:613）您的第一个浏览器也没有捕获错误。在被javascript代码捕获之前，Chrome会将其记录为网络错误。