Js自定义Error异常类型，与Vue全局异常捕获二者的妙用

用处

我想大家在Vue开发的过程中都会使用自己的提醒组件来对用户进行错误提示。
如使用element的message组件。

this.$message({
  	showClose: true,
  	message: '登录失败',
  	type: 'error'
});

当我们在代码里使用了特别多的提醒信息后代码会变的特别臃肿不易阅读，且后续如果想对提醒样式进行修改非常麻烦，因此我们可以使用Js自定义Error异常类型，与Vue全局异常捕获二者结合，实现统一提醒。

1. 自定义Error类型

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error

function MyError(message) {
  	// 错误名称
	this.name = 'MyError';
  	// 错误消息
  	this.message = message || 'No Message';
  	this.stack = (new Error()).stack;
  	// 还可以根据自己需求增加额外参数...
}
// 继承组合原有Error属性
MyError.prototype = Object.create(Error.prototype);
MyError.prototype.constructor = MyError;

2. 将错误类型挂载到Vue上便于使用

Vue.prototype.MyError = MyError
// Vue3：app.config.globalProperties.MyError = MyError

3. 全局异常捕获

参考：https://cn.vuejs.org/v2/api/#errorHandler

// Vue3 使用 app.config
Vue.config.errorHandler = (err, vm, info) => {
    if(err.name === 'MyError') {
    	// 此处也可以直接单独引用message组件，我这里是用的挂载到vue上的message
    	vm.$message({
		  	showClose: true,
		  	message: err.message,
		  	type: 'error'
		});
    }else{
    	// 不是我们自定义错误的最好还是在控制台输出一下，以免出了问题都不知道
    	console.error(err)
    }
}

4. 使用

这样原来的代码就简化为了

throw new this.MyError('登录失败');

是不是就很简洁了呢，此处以element的message举例，大家也可根据自己需求修改。