vue 工具封装

Tool = {
  /**
   * 空校验 null或""都返回true
   */
  isEmpty: function (obj) {
    if ((typeof obj == 'string')) {
      return !obj || obj.replace(/\s+/g, "") == ""
    } else {
      return (!obj || JSON.stringify(obj) === "{}" || obj.length === 0);
    }
  },

  /**
   * 非空校验
   */
  isNotEmpty: function (obj) {
    return !this.isEmpty(obj);
  },

  /**
   * 长度校验
   */
  isLength: function (str, min, max) {
    return $.trim(str).length >= min && $.trim(str).length <= max;
  },

  /**
   * 时间格式化,date为空时取当前时间
   */
  dateFormat: function (format, date) {
    let result;
    if (!date) {
      date = new Date();
    }
    const option = {
      "y+": date.getFullYear().toString(),        // 年
      "M+": (date.getMonth() + 1).toString(),     // 月
      "d+": date.getDate().toString(),            // 日
      "h+": date.getHours().toString(),           // 时
      "m+": date.getMinutes().toString(),         // 分
      "s+": date.getSeconds().toString()          // 秒
    };
    for (let i in option) {
      result = new RegExp("(" + i + ")").exec(format);
      if (result) {
        format = format.replace(result[1], (result[1].length == 1) ? (option[i]) : (option[i].padStart(result[1].length, "0")))
      }
    }
    return format;
  },

  /**
   * 移除对象数组中的对象
   * @param array
   * @param obj
   * @returns {number}
   */
  removeObj: function (array, obj) {
    let index = -1;
    for (let i = 0; i < array.length; i++) {
      if (array[i] === obj) {
        array.splice(i, 1);
        index = i;
        break;
      }
    }
    return index;
  },

  /**
   * 10进制转62进制
   * @param number
   * @returns {string}
   * @private
   */
  _10to62: function (number) {
    let chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ';
    let radix = chars.length;
    let arr = [];
    do {
      let mod = number % radix;
      number = (number - mod) / radix;
      arr.unshift(chars[mod]);
    } while (number);
    return arr.join('');
  },

  /**
   * 保存登录用户信息
   */
  setLoginMember: function (loginMember) {
    SessionStorage.set(SESSION_KEY_LOGIN_MEMBER, loginMember);
  },

  /**
   * 获取登录用户信息
   */
  getLoginMember: function () {
    return SessionStorage.get(SESSION_KEY_LOGIN_MEMBER) || {};
  },

  /**
   * 随机生成[len]长度的[radix]进制数
   * @param len
   * @param radix 默认62
   * @returns {string}
   */
  uuid: function (len, radix) {
    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    let uuid = [];
    radix = radix || chars.length;

    for (let i = 0; i < len; i++) {
      uuid[i] = chars[0 | Math.random() * radix];
    }

    return uuid.join('');
  },

  /**
   * 对象数组按key对应的值排序
   * @param array
   * @param key
   * @returns {*}
   */
  sortAsc: function (array, key) {
    return array.sort(function (obj1, obj2) {
      let val1 = obj1[key];
      let val2 = obj2[key];
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    });
  }
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中封装API接口是一个常见的任务,因为这是在Vue应用程序中使用API的主要方式。在Vue3中,我们可以使用Axios这个工具来处理HTTP请求。Axios对于Vue应用程序非常有用,并且能够轻松地编写模块化、可重用的API代码。 首先,在Vue3项目中,我们需要首先安装并引入Axios库。我们可以在Vue的main.js文件中导入Axios,然后将其安装到Vue实例中。在这个过程中,我们可以为Axios设置一些默认的配置,例如请求方式、请求url、请求超时时间等等。 接下来,我们可以在Vue的组件中定义一个API服务,并使用Axios库来进行API请求。我们可以通过封装一个统一的API服务来避免在不同的组件中重复写相同的请求代码,提高代码的封装性和重用性。可以将常用的API请求封装为方法,以便在Vue组件中轻松调用,并提供诸如请求参数、错误处理和成功处理等功能。 在Vue3中,我们可以使用Axios的拦截器来处理请求或响应数据,例如为请求添加统一的headers、过滤响应数据等等,从而提高API请求的灵活性。 最后,我们需要将API服务作为插件添加到Vue实例中,以方便在应用程序中全局使用。这是通过在Vue的main.js文件中安装一个Vue插件并将API服务作为选项导入实现的。 总的来说,在Vue3中封装API接口可以提高代码的可维护性和重用性,同时也能够使我们更容易地统一管理API请求,从而提高应用程序的性能和可靠性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值