统一错误处理（错误兜底）是一款好产品的基本配置。缺乏错误兜底的程序通常表现为：
- 点击某个操作，出错之后，界面上就反应
- 加载框一直转啊转，客户一脸迷茫的等待
迷茫
给人非常差的用户体验。其实最简单的处理就是给个提示，客户看到提示之后反馈问题，程序员把bug修掉就好了。具体怎么做呢？
Vue项目中主要的错误来源包括：
- 后端接口错误, 400, 404, 500常见。这个时候我们需要在axio中做统一处理。
- vue代码中本身逻辑错误，这个时候设置Vue的全局错误处理就可以了。省去在代码中到处写catch语句块
针对上述两种情形，做如下处理。
Axios 统一错误处理
用到 axios 的 interceptor, 对网络请求的response进行处理
apiClient.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response.status == 401) {
router.push({ name: "Login" });
} else {
message.error("出错了");
return Promise.reject(error);
}
}
);
Vue统一错误处理
用到Vue的全局 errorHandler
Vue.config.errorHandler = function(err) {
console.log("global", err);
message.error("出错了");
};
// ...此处省略其他配置
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
这样就算有底线了。
