关于Element Loading的全局使用(自定义Loading)

目录

• Element Loading的全局使用(自定义Loading)
• 方法一
• 方法二
• 方法三
• 总结

import axios from 'axios';
import qs from 'qs';
import { Message, Loading } from 'element-ui';
import { getToken } from "@/utils/token.js";
const baseUrl=`http://157:8852`;
const service = axios.create({
  baseURL: baseUrl,
  timeout: 60000,
});

service.defaults.headers["Content-Type"] = "application/json;charset=utf-8";

let loading = null; //定义loading变量

//开始 加载loading
let startLoading = () => {
  loading = Loading.service({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(null, 0, 0, 0.8)'
  })
}
//结束 取消loading加载
let endLoading = () => {
  loading.close();
}

let needLoadingRequestCount = 0 //声明一个变量
 
let showFullScreenLoading = () => {
  if (needLoadingRequestCount === 0) { //当等于0时证明第一次请求 这时开启loading
    startLoading()
  }
  needLoadingRequestCount++ //全局变量值++ 
}
 
let tryHideFullScreenLoading = () => {
  if (needLoadingRequestCount <= 0) return //小于等于0 证明没有开启loading 此时return
  needLoadingRequestCount-- //正常响应后 全局变量 --
  if (needLoadingRequestCount === 0) {  //等于0 时证明全部加载完毕 此时结束loading 加载
    endLoading();
  }
}

// 请求拦截器
service.interceptors.request.use((config) => {
    if (getToken()) {
      config.headers["Authorization"] = getToken();
    }
  if (config.url.indexOf('queryExecuteOnce') > -1) {
    console.log("1111", config.url);
  } else {
    //开启loading加载
    showFullScreenLoading();
  }
  return config;
}, (err) => {
  Message.error('请求失败!');
  return Promise.reject(err);
})

// 响应拦截器
service.interceptors.response.use((response) => {
  if (response.data.code == 302) {
    Message.warning('登录超时，请重新登录！');
    return;
  }
  //关闭loading加载
  tryHideFullScreenLoading();
  return response
}, (err) => {
  tryHideFullScreenLoading();
  if (err.toString().indexOf('Error: timeout') !== -1) {
    Message.warning('网络请求超时!');
    return Promise.reject(err);
  } else {
    Message.error('服务器响应失败，请稍后再试!');
    return Promise.reject(err);
  }
})

//公共css样式
.svg-container .el-input__inner {
padding-left: 40px;
}
.svg-container .flex {
display: flex;
align-items: center;
height: 100%;
}
.el-loading-spinner .circular {
display: none;
}
.el-loading-spinner {
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50px, -50px);
background: url("../assets/img/loading.png");
background-size: 100% 100%;
margin-top: 0px;
}
.el-loading-mask {
z-index: 9999 !important;
}

//vue文件调用方法
handleClickOne() {
const loading = this.$loading({
lock: true,
text: "",
spinner: "",
background: "rgba(null, 255, 255, 0.8)",
});
setTimeout(() => {
loading.close();
}, 2000);
},

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

const startLoading = () => {
loading = Loading.service({
lock: true,
text: '查验中,请稍等……',
background: 'rgba(null, 0, 0, 0.5)',
color: '#fff',
})
}

const endLoading = () => {
loading.close()
}
export const showLoading = () => {
if (loadingCount === 0) {
startLoading()
}
loadingCount += 1
}

export const hideLoading = () => {
if (loadingCount <= 0) {
return
}
loadingCount -= 1
if (loadingCount === 0) {
endLoading()
}
}