前言
最近老是做后台项目,很多页面需要同时请求多个数据,并且为了统一 loading 样式和加载效果、避免多个请求发起和结束之间有细微间隔导致 loading 闪烁的情况,所以就改造了一下 Axios 的封装,在拦截器中增加全屏 Loading 的处理。
1. 目标效果
根据目前的项目需求,总结了以下场景和对应要求:
- 在请求时开启 Loading 效果,请求结束时关闭;* 如果有多个请求,则尽量保证多个请求间隔不会存在闪烁,也不会添加多个 Loading 效果;* 可以配置是否开启全屏 Loading第一眼看到这个需求,就想到的肯定有防抖,用来实现一个时延效果,避免首次加载时可能出现的闪烁;但是在第一次请求开启 Loading 之后如何保证在关闭时就是最晚结束的请求呢?
这里我采用的方案就是通过一个数组长度来控制。
2. 方案实现
首先,是编写一个 request.js 文件,引入 Axios 和 ElementUI 的 Loading 组件,并初始化一个数组和 loading 组件实例。
import axios from "axios";
import { Loading } from "element-ui";
let loadingInstance;
const LoadingOpts = {text: "加载中,请稍后......"
};
const RequestStack = [];
let RequestId = 0; // 也可以不用