常规操作
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('保存成功') }复制代码
总结:使用断言的方式可以简化大量重复繁琐的代码,更加专注于业务处理,舒服不止一点点。