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

语言: CN / TW / HK

highlight: an-old-hope theme: hydrogen


持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第N天,点击查看活动详情

前言

最近老是做后台项目,很多页面需要同时请求多个数据,并且为了统一 loading 样式和加载效果、避免多个请求发起和结束之间有细微间隔导致 loading 闪烁的情况,所以就改造了一下 Axios 的封装,在拦截器中增加全屏 Loading 的处理。

1. 目标效果

根据目前的项目需求,总结了以下场景和对应要求:

  • 在请求时开启 Loading 效果,请求结束时关闭;

  • 如果有多个请求,则尽量保证多个请求间隔不会存在闪烁,也不会添加多个 Loading 效果;

  • 可以配置是否开启全屏 Loading

第一眼看到这个需求,就想到的肯定有防抖,用来实现一个时延效果,避免首次加载时可能出现的闪烁;但是在第一次请求开启 Loading 之后如何保证在关闭时就是最晚结束的请求呢?

这里我采用的方案就是通过一个数组长度来控制。

2. 方案实现

首先,是编写一个 request.js 文件,引入 Axios 和 ElementUI 的 Loading 组件,并初始化一个数组和 loading 组件实例。

```javascript import axios from "axios"; import { Loading } from "element-ui";

let loadingInstance; const LoadingOpts = { text: "加载中,请稍后......" };

const RequestStack = []; let RequestId = 0; // 也可以不用 ```

这里我定义了一个自增式的ID,用来标识当前的请求,也可以取消,对实际逻辑没有影响。

然后,我们再通过 lodash 提供的 debounce 防抖函数,封装一个 Loading 的关闭方法。

```javascript import { debounce } from "lodash";

const closeLoading = debounce(() => { if (!RequestStack.length) { loadingInstance && loadingInstance.close(); loadingInstance = null } }, 100); ```

只有当此时的请求数组的长度为 0 的时候,才关闭 Loading 效果。

因为在 Node 的模块环境下,一个 js 文件就相当于一个模块,只要没有导出,内部的变量就是相对安全的;所以 RequestStack 的操作和长度基本不会被外界改变,可以确保该数组长度就是请求中的 http 请求个数;当长度为 0 时,那肯定就是没有 http 请求,需要关闭 Loading 了。

而增加防抖操作,也是为了避免有些同步请求的操作导致的闪烁。

最后,就是增加 axios 的拦截器配置,在发起时向数组中插入一个元素,在结束时(异常、正常等)删除一个元素,并调用 closeLoading 关闭加载效果。

```javascript // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 开启 Loading if (config.fullscreen) { !loadingInstance && (loadingInstance = Loading.service(LoadingOpts)) RequestStack.push(RequestId++); } return config; }, function (error) { // 发生错误时清除一个元素 RequestStack.pop(); closeLoading(); return Promise.reject(error); });

// 添加响应拦截器,不管成功还是失败都需要关闭 loading axios.interceptors.response.use(function (response) { RequestStack.pop(); closeLoading(); return response; }, function (error) { RequestStack.pop(); closeLoading(); return Promise.reject(error); }); ```

3. 总结

总的来说,这个方案原理很简单:通过闭包来实现多个请求时数量的统一和 CloseLoading 的正确时机。但是也有一些问题,比如有些大数据请消耗大量时间,或者请求间隔大于100ms,一样有可能影响用户体验,实际的加载动画效果依然要根据项目情况来进行调整。

最后一句话,闭包真好用~~~