一、错误类型
任何一个框架，对于错误的处理都是一种必备的能力
在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。
主要的错误来源包括：
后端接口错误代码中本身逻辑错误
二、后端接口错误
-
请求完成后捕获错误---------- 封装axios请求，通过
catch捕获错误。axios({ method:'get', url:'地址', }).then(res=>{ //成功处理 }).catch(err=>{ //捕获错误 }) -
请求返回后通过拦截器捕获错误-----------
通过axios的interceptor实现网络请求的response先进行一层拦截// 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
三、代码逻辑问题
1、设置全局错误处理函数
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
// 只在 2.2.0+ 可用
}
2、生命周期钩子
errorCaptured是 2.5.0 新增的一个生命钩子函数，当捕获到一个来自子孙组件的错误时被调用。
下面来看个例子：
定义一个父组件cat
Vue.component('cat', {
template:`
<div>
<h1>Cat: </h1>
<slot></slot>
</div>`,
props:{
name:{
required:true,
type:String
}
},
// 错误捕获钩子
errorCaptured(err,vm,info) {
console.log(`cat error: ${
err.toString()}\n info: ${
info}`);
return false;
}
});
定义一个子组件kitten，其中dontexist()并没有定义，存在错误
Vue.component('kitten', {
template:'<div><h1>Kitten: {
{ dontexist() }}</h1></div>',
props:{
name:{
required:true,
type:String
}
}
});
页面中使用组件
<div id="app" v-cloak>
<cat name="my cat">
<kitten></kitten>
</cat>
</div>
在父组件的errorCaptured则能够捕获到信息
cat error: TypeError: dontexist is not a function
info: render
参考官网，错误传播规则如下：
- 默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报
- 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
- 如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler
- 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler