vue项目全局拦截axios请求并挂载loading

在vue项目中的main.js进行全局的操作.

1.从elementui中引入loading

import { Loading } from 'element-ui'; //项目已经全局引入element的话可以不单独引入
Vue.use(ElementUI)

2.定义变量

let loading = null //定义loading变量

function startLoading() {    //使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加载中……',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}

function endLoading() {    //使用Element loading-close 方法
  loading.close()
}
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

3.在axios中设置拦截

axios.interceptors.request.use(
  //有请求,展示loading
  config => {
    showFullScreenLoading()
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

axios.interceptors.response.use(data => {
  //返回数据,异常loading
  tryHideFullScreenLoading()
  return data;
}, error => {
  return Promise.reject(error)
})

挂载loading的方法还可以解决项目中多次点击按钮,发送了多次请求的问题,也可以完成按钮防抖效果