简述了解:
errorCaptured 是组件外部钩子,当捕捉一个来自子孙组件的谬误时被调用,接管 error、 vm、info 三个参数,return false 后能够阻止谬误持续向上抛出
errorHandler 为全局钩子,应用 Vue.config.errorHandler 配置,接管参数与 errorCaptured 一 致,2.6 后可捕获 v-on 与 promise 链的谬误,可用于对立错误处理与谬误兜底
具体看看:
一、谬误类型
任何一个框架,对于谬误的解决都是一种必备的能力
在Vue 中,则是定义了一套对应的错误处理规定给到使用者,且在源代码级别,对局部必要的过程做了肯定的错误处理。
次要的谬误起源包含:
1.后端接口谬误
2.代码中自身逻辑谬误
二、后端接口谬误
申请实现后捕捉谬误---------- 封装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 functioninfo: render
官网,谬误流传规定如下:
1.默认状况下,如果全局的 config.errorHandler 被定义,所有的谬误仍会发送它,因而这些谬误依然会向繁多的剖析服务的中央进行汇报
2.如果一个组件的继承或父级隶属链路中存在多个 errorCaptured 钩子,则它们将会被雷同的谬误一一唤起。
3.如果此 errorCaptured 钩子本身抛出了一个谬误,则这个新谬误和本来被捕捉的谬误都会发送给全局的 config.errorHandler
4.一个 errorCaptured 钩子可能返回 false 以阻止谬误持续向上流传。实质上是说“这个谬误曾经被搞定了且应该被疏忽”。它会阻止其它任何会被这个谬误唤起的 errorCaptured 钩子和全局的 config.errorHandler