console.log 中出现 Axios Stop 404 错误

Posted 2023-02-22

【中文标题】console.log 中出现 Axios Stop 404 错误

【英文标题】：Axios Stop 404 error appearing in the console.log

【发布时间】：2019-12-13 18:41:20

【问题描述】：

我正在通过 Axios 检查资源是否存在，如果不存在则返回 404 是正常的。

但是，当返回 404 时，它会显示在控制台中。我试图捕捉错误，但这并不能阻止它被 chrome 显示。

        axios.get('/api/user/checkin').then((response) => 
            Vue.set(UserStore,'checkin', response.data)
            this.loading = false;
        ).catch((error) =>)

我正在检查用户是否被检查，如果他们是，我将返回他们签入时间的记录以及网站上的一些详细信息。

如果不是，那么我没有什么可返回的，所以我返回一个 404。我可以返回一个空白记录，但这确实让人感到非常放松。

【问题讨论】：

尝试用 try/catch 包装你的代码

浏览器自然会提示网络请求错误。

我相信 Chrome 控制台中有一个过滤器可以过滤掉任何Network Requests，您可以取消选中它，它会停止向您显示此内容。

【参考方案1】：

这是 chrome 行为。见this 和also this。 您可以按照this answer 的建议在catch 中执行console.clear()。

axios.get('/api/user/checkin')
  .then((response) => 
    Vue.set(UserStore,'checkin', response.data)
    this.loading = false;
  )
  .catch(() => console.clear()) // this will clear any console errors caused by this request

或简称.catch(console.clear)。

但请注意，您将丢失任何以前的控制台日志。

编辑：

您可能希望仅在收到 404 响应时清除控制台。

axios.get('/api/user/checkin')
  .then((response) => 
     Vue.set(UserStore,'checkin', response.data)
     this.loading = false;
  )
  .catch((error) => 
    if(error.response && error.response.status === 404) 
      console.clear();
    
  )

请参阅handling errors in Axios 了解更多信息。

【参考方案2】：

而不是执行console.clear，这会清除您的整个控制台，从而难以显示您实际需要的日志。尝试检查 Chrome 控制台选项中的 Hide Network 选项。它将为您隐藏所有网络错误，这可能是控制台中唯一从网络显示的内容。

例如

未选中：

检查：