axios二次封装节流和防抖

节流，控制请求还没加载完时再重复请求，常用于控制短时间内连续点击按钮发请求的情况，只执行第一次的请求。

防抖，禁止重复请求，常用在模糊查询，避免一直向后端请求数据，永远只获取最后一次的数据。

我这里用参数isLoading设置节流，loading弹窗在请求时出现，请求完成后消失，在请求过程中无法点击按钮发起请求，达到节流的目的。 用参数debounce设置防抖，

核心——CancelToken

let pending = [] //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken
let removePending = (config, debounce = false) => {
  if (debounce) {
    // 防抖
    for (let p in pending) {
      if (pending[p].u === config.url.split('?')[0] + '&' + config.method) {
        //当当前请求在数组中存在时执行函数体
        pending[p].f() //执行取消操作
        pending.splice(p, 1) //数组移除当前请求
      }
    }
    config.cancelToken = new cancelToken((c) => {
      // pending存放每一次请求的标识，一般是url + 参数名 + 请求方法，当然你可以自己定义
      pending.push({ u: config.url.split('?')[0] + '&' + config.method, f: c }) //config.data为请求参数
    })
  }
}

service.interceptors.request.use(
  (config) => {
    const { isLoading, debounce } = config
    removePending(config, debounce)

    // 请求拦截进来调用显示loading效果
    if (isLoading !== false) {
      showLoading(store)
    }

    return config
  },
  (error) => {
    console.log('error', error)
    hideLoading(store)
    return Promise.reject(new Error(error))
  }
)

用法：

// isLoading  Boolean 默认为true 是否显示加载中 默认为true 可用于节流，控制元素禁止还没加载完再重复点击
// debounce   Boolean 默认为false 防抖，禁止重复请求，常用在模糊查询时防抖，避免一直向后端请求数据，永远只获取最后一次的数据，从而大大提高性能，一般开发是不需要设置此属性
const { Data } = await getList(params, {
    isLoading: false,
    debounce: true
  })

api配置：

export const page = (data, config) => {
  return request({
    url: '/sysUser/page',
    method: 'get',
    params: data,
    ...config
  })
}