vue-全局错误处理

我们之前调用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

1. 指定组件的渲染和观察期间未捕获错误的处理函数
2. 全局最高错误处理级别

errorCaptured

1. 当捕获一个来自子孙组件的错误时被调用
2. 不能捕获异步promise内部抛出的错误和自身的错误
3. 能够返回 false 以阻止错误继续向上传播
4. errorCaptured 发生在前，且如果某个组件的 errorCaptured 方法返回了 false，那么这个异常信息不会再向上冒泡也不会再调用 errorHandler 方法

总结：errorCaptured相当于中间层可以用来拦截报错，忽略处理。也可以在组件中独立处理当前页面的情况。而errorHandler是所有错误的最终处理位置。