nuxt设置全局loading

创建js文件elLoading.js

import { Loading as ElLoading } from 'element-ui'
class LoadingConf {
  constructor(){
    this.loading = null
    this.loadingCounter = -1
  }
  showLoading(config) {
    if (config) {
    // config.loading 自定义 变量 通接口中传过来，用于控制那些接口需要loading
      if (config.loading && !this.loading){
        this.loading = ElLoading.service({
          fullscreen: false,
          target: ".custom_loading" // 指定绑定的dom 默认值为 document.body,详情同element loading文档
        });
      }  
    } else if (!loading) {
      this.loading = ElLoading.service({
          fullscreen: false,
          target: ".custom_loading"
      });
    }
    this.loadingCounter++;
  }
  closeLoading() {
    if (--this.loadingCounter >= 0) return;
    if (this.loading) {
      if (this.loading) this.loading.close();
      this.loading = null;
    }
  }
}
const elLoadingObj  = new LoadingConf()
export default elLoadingObj

在axios中使用

import axios from 'axios'
import elLoadingObj from '~/utils/elLoading.js'
const instance = axios.create()

instance.interceptors.request.use(config => {
    if(process.client){
      // 开启loading
      elLoadingObj.showLoading(config)
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)
instance.interceptors.response.use(response => {
  if(process.client){
    // 关闭loading
    elLoadingObj.closeLoading()
  }
  return response
})

export default instance