Axios 422 错误处理：如何防止控制台消息？答案

【问题标题】：Axios 422 error handling: how to prevent console message?Axios 422 错误处理：如何防止控制台消息？
【发布时间】：2020-12-16 12:13:38
【问题描述】：

我正在创建一个应用程序：Laravel 作为后端，Vue 作为前端。对于验证错误的响应，我使用代码 422（根据 this article 的建议）。

我的 PHP 代码（表单 RegisterController）：

if ($this->validator($request->all())->fails()) {
    return response()->json(['errors'=>$this->validator($request->all())->errors()], 422);
}

在我的 Vue 应用程序中，我使用的是 Vuex。我的注册操作如下所示：

const actions = {
    ACTION_SIGN_UP: async (context, payload) => {
        Axios
            .post('/api/v1/register', payload)
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                if (error.response) {
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                } else if (error.request) {
                    console.log(error.request);
                } else {
                    console.log('Error', error.message);
                }
                console.log(error.config);
            });
    }
};

错误被处理，但同时控制台出现错误信息：

那么如何防止控制台消息呢？

【问题讨论】：

从浏览器的角度来看，请求是应该在特定时间窗口内得到响应的东西。如果达到超时并且没有响应，则浏览器决定记录错误，因为这是意外行为。因此，您需要注意，无法避免浏览器控制台中的任何错误。不过也没什么不好，你为什么要隐藏这些？

标签： vue.js axios

【解决方案1】：

这个话题已经讨论了很长时间，请参阅 3 年前的 this 相关 SO 帖子，其中提到这是一个长期争论的问题。

它的要点是，这是开发人员不应该（也不能在 Chromium 中）更改的预期功能。这些网络错误是从被访问的后端资源发回的，它的目的是在开发控制台中记录错误。

也就是说，没有理由隐藏它们，请尝试打开您的开发控制台并查看一些最大的网站（twitter、facebook 等），您很可能会看到记录了一些响应错误。

祝你好运！

【讨论】：