前端基础向～封装Axios优化页面Loading效果

最新推荐文章于 2025-05-21 17:35:09 发布

原创

最新推荐文章于 2025-05-21 17:35:09 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍如何在前端项目中通过封装Axios并在拦截器中利用防抖技术，实现全屏Loading效果，避免请求间隔导致的闪烁。目标是在请求开始时开启Loading，结束时关闭，并确保在所有请求完成后关闭。方案包括使用自增ID，维护请求数组，通过数组长度判断请求状态，以及应用lodash的debounce防抖函数。总结中提到，虽然简单有效，但还需针对不同项目调整加载动画以优化用户体验。

前言

最近老是做后台项目，很多页面需要同时请求多个数据，并且为了统一 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; // 也可以不用