vue3管理后台请求全局增加loading，element-plus

vue3管理后台请求全局增加loading，element-plus

// axios.js

// 引入loading组件

import { ElLoading } from 'element-plus';

// loading 全局定义设置
let globalLoading;

// 请求拦截器，增加loading
// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 请求加loading
    globalLoading = ElLoading.service({
      lock: true,
      text: '加载中…',
      background: 'rgba(0, 0, 0, 0.7)',
    });
    const token = localStorage.getItem('token');
    const userId = localStorage.getItem('userId');
    if (token) {
      config.headers.token = `${token}`;
      config.headers.userId = `${userId}`;
    }
    return config;
  },

// 响应拦截，关闭loading
// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    globalLoading.close();
    ... ...
}