vue + axios + element-ui 实现全局Loading(部分接口不要loading，多个请求合并一个loading)

vue + axios + element-ui 实现全局Loading(部分接口不要loading，多个请求合并一个loading)

1. loading.js

import { Loading } from 'element-ui'
let needLoadingRequestCount = 0
let loading

const startLoading = () => {
  loading = Loading.service({
    lock: true,
    text: '拼命加载中...', //可以自定义文字
    spinner: 'el-icon-loading', //自定义加载图标类名
    background: 'rgba(0, 0, 0, .3)' //遮罩层背景色
  })
}
function endLoading() {
  Vue.nextTick(function() {
    // DOM 更新了
    loading.close()
  })
}
export const showLoading = () => {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

export const hideLoading = () => {
  setTimeout(tryCloseLoading, 300)
}

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

2. 在 封装axios请求的地方引入loading.js

import { showLoading, hideLoading } from '@/util/loading'

// 请求拦截
axios.interceptors.request.use(
  config => {  
  // 这里是加loading的地方
    if (config.config.showLoading === true) {
      showLoading()
    }
    //..... 其他代码 
  },
  error => {
    hideLoading()
    return Promise.reject(error)
  }
  )
  
// 响应拦截
axios.interceptors.response.use(
  res => {
    hideLoading()
   //..... 其他代码 
  },
  error => {
    hideLoading()
    //..... 其他代码 
  }
)

//* 封装post请求 （默认都加上loading）
export function post(url, data = {}, config = { showLoading: true }) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      data,
      config
    }).then(
      response => {
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}

3. 当请求不想要带loading时：