vue axios全局loading以及函数防抖

utils.js 防抖函数

/**
 * author：qyy
 * 函数防抖
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

request.js axios请求设置全局loading以及防抖效果

import axios from 'axios';

import { debounce } from './utils.js';

const service=axios.create({
    timeout:60*1000
})
let loadingReqCount = 0; // 请求次数变量
let loading =null; // loading实例

function showLoading() {
if (loadingReqCount === 0 && !loading) {
loading = Vue.prototype.$loading({
    lock:true,text:'加载中',
    spinner: "el-icon-loading", 
    background: "transparent"}) //遮罩层透明色
}
  loadingReqCount++;
}

const hideLoading=()=> {
  loadingReqCount--;
  loadingReqCount = Math.max(loadingReqCount, 0); // 保证大于等于0
  if (loadingReqCount === 0 || loading) {
    Vue.prototype.$nextTick(()=>{
        loading.close()
    })
  }
}

// 关闭loading防抖，延迟300ms执行，合并该时延内的间断请求。
const closeLoading = debounce(closeLoading, 300);

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    showLoading();
  },
  error => {
    closeLoading();
  },
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    closeLoading();
  },
  error => {
    closeLoading();
  },
);

export default service;