Vue项目统一错误处理

统一错误处理（错误兜底）是一款好产品的基本配置。缺乏错误兜底的程序通常表现为：

• 点击某个操作，出错之后，界面上就反应
• 加载框一直转啊转，客户一脸迷茫的等待

迷茫

给人非常差的用户体验。其实最简单的处理就是给个提示，客户看到提示之后反馈问题，程序员把bug修掉就好了。具体怎么做呢？

Vue项目中主要的错误来源包括：

1. 后端接口错误, 400, 404, 500常见。这个时候我们需要在axio中做统一处理。
2. 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");

这样就算有底线了。