全局封装loading 加载样式 vue3

新建js文件

/**
 * 全局loading效果：合并多次loading请求，避免重复请求
 * 当调用一次showLoading，则次数+1；当次数为0时，则显示loading
 * 当调用一次hideLoading，则次数-1; 当次数为0时，则结束loading
 */
 import { ElLoading } from 'element-plus';
 
 // 定义一个请求次数的变量，用来记录当前页面总共请求的次数
 let loadingRequestCount = 0;
 // 初始化loading
 let loadingInstance;
  
 // 编写一个显示loading的函数 并且记录请求次数 ++
 const showLoading = (target) => {
     if (loadingRequestCount === 0) {
         // element的服务方式 target 我这边取的是表格class
         // 类似整个表格loading和在表格配置v-loading一样的效果，这么做是全局实现了，不用每个页面单独去v-loading
         loadingInstance = ElLoading.service({ target ,text: '加载中...' ,background: 'rgba(0, 0, 0, 0.8)'});
     }
     //解决弹窗打开时loading样式被覆盖问题
     let div = document.querySelector(".el-loading-mask");
     div.style.zIndex ="9999";
     loadingRequestCount++
 }
  
 // 编写一个隐藏loading的函数，并且记录请求次数 --
 const hideLoading = () => {
     if (loadingRequestCount <= 0) return
     loadingRequestCount--
     if (loadingRequestCount === 0) {
         loadingInstance.close();
     }
  }
  
  export {
     showLoading,
     hideLoading
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在main.js方法引入文件

// 注入全局方法
import { showLoading, hideLoading } from '@/views/component/loading'
app.config.globalProperties.$showLoading = showLoading
app.config.globalProperties.$hideLoading = hideLoading
1
2
3
4

还需引入关闭loading的样式放到拦截器中，请求结束关闭
http.js包含拦截器和请求封装
代码如下

import axios from 'axios';
import { ElMessage } from 'element-plus';
import { getToken, removeToken } from '@/utils/token.js';
import Router from '@/router';
import { hideLoading } from '@/views/component/loading'
import qs from 'qs';

//请求拦截器
axios.interceptors.request.use(
  (config) => {
    config.headers['token'] = getToken();
    return config;
  },
  (err) => {
    closeLoading()
    ElMessage.error('系统错误，请求失败!');
  }
);

//响应拦截器
axios.interceptors.response.use(
  (data) => {
    closeLoading()
    if (data.headers.tokenstatus === 'tokenTimeout') {
      removeToken();
      ElMessage.error('登录信息已过期，请重新登录!');
      Router.push('/login').catch((err) => err);
      return data;
    }
    return data;
  },
  (err) => {
    closeLoading()
    switch (err.response.status) {
      case 401:
        removeToken();
        ElMessage.error(err.response.data.body.msg);
        Router.push('/login');
        break;
      default:
        ElMessage.error('系统错误，请求失败!');
        break;
    }
    if (!err.response.status) {
      closeLoading()
      return { data: err.response };
    }
  }
);

/**
 * axios请求的封装
 * axios默认请求类型为application/json
 */
axios.defaults.baseURL = '/api/';
// 允许跨域携带cookie信息
axios.defaults.withCredentials = true;
// 表示所有axios请求都是跨域请求，那么每次请求之前都会发送一个Options（预检）请求，用于询问后端是否允许本次请求。所以需要后端也进行相应的设置。
axios.defaults.crossDomain = true;

// post请求
export const postRequest = (url, params, isList = false) => {
  params = notNull(params);
  let transformRequest = [
    function (data) {
      let ret = '';
      for (let i in data) {
        ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&';
      }
      return ret;
    },
  ];
  if (isList) {
    transformRequest = [
      function (data) {
        // 解决传递数组变成对象的问题
        return qs.stringify(data, { arrayFormat: 'indices', allowDots: true });
      },
    ];
  }
  return axios({
    method: 'post',
    url: url,
    data: params,
    //axios自带的数据操作方法,可以在请求前将数据格式化
    transformRequest: transformRequest,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    },
  });
};

// get请求
export const getRequest = (url, params) => {
  return axios({
    method: 'get',
    url: url,
    params: params,
  });
};

// 后台返回流的请求
export const postStreamRequest = (url, params) => {
  return axios({
    method: 'post',
    url: url,
    params: params,
    responseType: 'arraybuffer',
  });
};

export const notNull = (data) => {
  for (let k1 in data) {
    if (data[k1] === null) {
      data[k1] = '';
      continue;
    }
    if (Object.prototype.toString.call(data[k1]) === '[object Object]') {
      notNull(data[k1]);
      continue;
    }
    if (Array.isArray(data[k1])) {
      for (let k2 in data[k1]) {
        if (
          Object.prototype.toString.call(data[k1][k2]) === '[object Object]'
        ) {
          notNull(data[k1][k2]);
        }
      }
      continue;
    }
  }
  return Object.assign({}, data);
};

function closeLoading(){
  try{
    hideLoading()
  }catch(e){

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

使用示例

async function loadZyzhzdjkftjOptionList() {
//请求前使用
   proxy.$showLoading()
  const { data: res } = await proxy.$postRequest(
    "接口"
  );
  if (res.status == 200) {
  //请求成功后隐藏
  } else {
    proxy.$message.error(res.msg);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12