我们之前调用api,当后端报错比如404或者直接500错误,则页面会出现一直转圈的情况。
api错误一般可以在axios的拦截中处理掉。如果错误处理情况覆盖不全,那么就会出现报错无人处理。这时候可以将错误抛给全局错误处理函数。
// common.js
// errorHandler指定组件的渲染和观察期间未捕获错误的处理函数
// err错误对象
// vm Vue实例
// 可以捕获promise异步错误。
// `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
// 只在 2.2.0+ 可用
export function errorHandler (err, vm, info) {
if (err.isAxiosError) {
// 处理全局状态。
...
// 提示、或者跳转错误页面。
Message.error({
message: err.message,
customClass: 'm-z-index'
})
}
...
}
// main.js
import {errorHandler} from '@/common.js'
Vue.prototype.errorHandler = errorHandler
Vue.proptotype.$throw = err => errorHandler(err, this)
// 页面中使用
try {
this.loading = true
await res = this.$http.xxx()
// 如果成功
...
} catch(error) {
// 失败后关闭当前页面的加载
this.loading = false
...
this.$throw(error) // 如果api拦截没处理,可以主动抛给全局处理。
...
}
// 为什么要使用try catch。
// 因为这样在使用async-await的时候,可以处理当前页面的一些状态。
与 errorCaptured
比较
errorHandler
- 指定组件的渲染和观察期间未捕获错误的处理函数
- 全局最高错误处理级别
errorCaptured
- 当捕获一个来自子孙组件的错误时被调用
- 不能捕获异步promise内部抛出的错误和自身的错误
- 能够返回 false 以阻止错误继续向上传播
- errorCaptured 发生在前,且如果某个组件的 errorCaptured 方法返回了 false,那么这个异常信息不会再向上冒泡也不会再调用 errorHandler 方法
总结:errorCaptured相当于中间层可以用来拦截报错,忽略处理。也可以在组件中独立处理当前页面的情况。而errorHandler是所有错误的最终处理位置。