VUE:获取异步错误并自定义处理

问题场景

在使用codemirror实现json、yml和property之间的转换时，使用了js-yaml插件处理json和yml，发现当输入yml格式错误时会在控制台输出错误提示，希望能够在页面上显示这个错误信息而不在控制台以error形式输出(且不影响vue默认的错误处理方法)。

分析一

查看vue的错误处理机制是Vue.config.errorHandler，我们可以将需要新错误处理方式的函数处理成async函数，使用promise的错误处理机制。

方法一:重新定义错误处理方法

学习链接：http://www.ccc5.cc/2213.html
在main.js中加入：

// 为了不影响vue自有的Vue.config.errorHandler正常工作
// 再单独定义一个异步错误处理函数
Vue.error.asyncErrorHandler = err => {
	// 错误处理
}

// 然后在vue实例创建之前，包裹所有method方法
// 根据method执行后返回的是否是promise，来决定是否需要catch错误
Vue.mixin({
	beforeCreate() {
		const methods = this.$options.methods || {}
		Object.keys(methods).forEach(key => {
			let fn = methods[key]
			this.$options.methods[key] = function(...args) {
				let ret = fn.apply(this, args)
				if (ret && typeof ret.catch === function) {
					return ret.catch(Vue.config.asyncErrorHandler)
				} else { // 默认错误处理
					return ret
				}
			}
		})
	}
})

完成上述后，我们在新建vue实例的时候，将需要使用自定义错误处理的方法声明为async:

new Vue({
	methods: {
		async fn() {
			await timeout() // timeout中reject的错误会被捕获
		},
		async fn1() {
			throw { msg: 'async函数中同步抛错', status:1000 } // 同步抛错也会被捕获
		},
		fn2() {
			// 原来的方式书写method，人为触发不捕获
			// 生命周期中调用被Vue.config.errorHandler捕获
			throw  { msg: '非async方法还是按照原来的方式处理错误', status:3000 }
		}
	}
})

方法二

直接使用

try{
	...
}catch(e){
	//错误处理
}