vue中axios请求全局封装loading动画

小储今天暴富了

已于 2023-04-19 14:15:07 修改

阅读量1.1k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-03-21 15:28:01 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53474595/article/details/129689627

版权

以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例，所以我们全局封装的时候采用计数的方式确定是否关闭loading.

还需要注意的是Loading.service target里面可以配置局部现实加载动画，适应于实际项目中不需要全屏显示加载动画


import axios from "axios";
import { Message } from 'element-ui';
import { Loading } from "element-ui";
import ipConfig from "./ip-config";
let requestCount = 0
let loadingInstance = null
function logout() {
     localStorage.setItem("token2", undefined);
     localStorage.setItem("loginTime2", Date.now());
     localStorage.setItem("userName2", "");
     window.location.href = "/";
}
const service = axios.create({
     baseURl: ipConfig.baseIp,
     timeout: 30 * 1000,//设置6分钟
});
//请求拦截器
service.interceptors.request.use(config => {
     //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等&