零碎小知识

一.防抖

作用:阻止重复的请求,避免服务器资源浪费.

逻辑思路 : 使用定时器,连续多次点击同一个按钮,在点击最后一次之后,过一小段时间才发送一次请求

方法一:

原理:重复的产生一个定时器函数,在动作再次发生的时候,清除当前的定时器,创建新的定时器.

(1)自定义一个定时器

(2)使用插件lodash

// 使用lodash对请求方法做防抖, let sendPost = _.debounce(请求地址返回的promise对象,时间)

方法二:

原理:在axios请求拦截器上定义一个映射对象,在每次发送请求的时候,做一步判断,判断上一次同样的请求有没有发送,如果发送了,就取消上次的请求,执行本次的请求

二.解决空对象也会传值到后端的问题

作用:避免传递空对象到后端造成资源浪费的问题.

(1)在vue的原型对象上加上一个自定义命令

//filter.js
export default {
  install: Vue => {
    Vue.prototype.$comm = {
      filterEmptyObj
    }
  }
}

(2)在main.js上面使用注册

import comm from "@/utils/filter.js"
Vue.use(comm)     //全局注册这个控制过滤器

(3)在引用axios中的请求命令之前加上自定义属性用来过滤去除传递的空对象值.

 getTableList () {
      queryOrderList(this.$comm.filterEmptyObj(this.reqData)).then((res) => {
        this.total = res.total
        this.tableData = res.list
      })