vue之断言方式校验参数并错误提示

常规操作

 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('保存成功')
  }

上诉该方式很明显代码比较冗余，且繁琐。

断言方式处理

1. 在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);
    }
}

2. 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)
  }
}

3. 使用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('保存成功')
  }

总结：使用断言的方式可以简化大量重复繁琐的代码，更加专注于业务处理，舒服不止一点点。