常规操作
async saveSql() {
// 如果sql内容为空，则提示并结束执行
if (this.sql === '') {
this.$message.error('sql内容不能为空')
return
}
// 如果Id为空，则提示并结束执行
if (!this.dbId) {
this.$message.error('请先选择数据库')
return
}
await dbApi.saveSql.request({ id: this.dbId, sql: this.sql, type: 1 })
this.$message.success('保存成功')
}
上诉该方式很明显代码比较冗余，且繁琐。
断言方式处理
- 在common目录新建assert.ts文件
/**
* 不符合业务断言错误。
* 如果不自定义该错误，vue全局错误不好处理，无法判断捕获的错误是不是要在控制台打印错误信息
*/
class AssertError extends Error {
constructor(message: string) {
super(message); // (1)
// 错误类名
this.name = "AssertError";
}
}
/**
* 断言对象不为null或undefiend
*
* @param obj 对象
* @param msg 错误提示
*/
export function notNull(obj: any, msg: string) {
if (obj == null || obj == undefined) {
throw new AssertError(msg)
}
}
/**
* 断言字符串不能为空
*
* @param str 字符串
* @param msg 错误提示
*/
export function notEmpty(str: string, msg: string) {
if (str == null || str == undefined || str == '') {
throw new AssertError(msg);
}
}
/**
* 断言两对象相等
*
* @param obj1 对象1
* @param obj2 对象2
* @param msg 错误消息
*/
export function isEquals(obj1: any, obj2: any, msg: string) {
if (obj1 !== obj2) {
throw new AssertError(msg);
}
}
/**
* 断言表达式为true
*
* @param obj1 对象1
* @param obj2 对象2
* @param msg 错误消息
*/
export function isTrue(condition: boolean, msg: string) {
if (!condition) {
throw new AssertError(msg);
}
}
- main.ts新增vue全局错误处理函数
// 全局error处理
Vue.config.errorHandler = function(err, vm ,info) {
// 如果是断言错误，则进行提示即可
if (err.name == 'AssertError') {
ElementUI.Message.error(err.message)
} else {
// 否则控制台打印错误信息
console.error(err, info)
}
}
- 使用assert
// 导入对应函数
import { notEmpty, notNull } from '@/common/assert'
async saveSql() {
// 如果为空则会抛错误，函数也会终止
notEmpty(this.sql, 'sql内容不能为空')
notNull(this.dbId, '请先选择数据库')
await dbApi.saveSql.request({ id: this.dbId, sql: this.sql, type: 1 })
this.$message.success('保存成功')
}
总结：使用断言的方式可以简化大量重复繁琐的代码，更加专注于业务处理，舒服不止一点点。
