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();
    ... ...
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐