用Axios Element实现全局的请求loading的方法
背景
业务需求是这样子的,每当发请求到后端时就触发一个全屏的 loading,多个请求合并为一次 loading。
现在项目中用的是 vue 、axios、element等,所以文章主要是讲如果使用 axios 和 element 实现这个功能。
效果如下:
分析
首先,请求开始的时候开始 loading, 然后在请求返回后结束 loading。重点就是要拦截请求和响应。
然后,要解决多个请求合并为一次 loading。
最后,调用element 的 loading 组件即可。
拦截请求和响应
axios 的基本使用方法不赘述。笔者在项目中使用 axios 是以创建实例的方式。
// 创建axios实例 const $ = axios.create({ baseURL: `${URL_PREFIX}`, timeout: 15000 })
然后再封装 post 请求(以 post 为例)
export default { post: (url, data, config = { showLoading: true }) => $.post(url, data, config) }
axios 提供了请求拦截和响应拦截的接口,每次请求都会调用showFullScreenLoading方法,每次响应都会调用tryHideFullScreenLoading()方法
// 请求拦截器 $.interceptors.request.use((config) => { showFullScreenLoading() return config }, (error) => { return Promise.reject(error) }) // 响应拦截器 $.interceptors.response.use((response) => { tryHideFullScreenLoading() return response }, (error) => { return Promise.reject(error) })
那么showFullScreenLoading tryHideFullScreenLoading()要干的事儿就是将同一时刻的请求合并。声明一个变量needLoadingRequestCount,每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。调用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount为 0 时,结束 loading。
let needLoadingRequestCount = 0 export function showFullScreenLoading() { if (needLoadingRequestCount === 0) { startLoading() } needLoadingRequestCount++ } export function tryHideFullScreenLoading() { if (needLoadingRequestCount <= 0) return needLoadingRequestCount-- if (needLoadingRequestCount === 0) { endLoading() } }
startLoading()和endLoading()就是调用 element 的 loading 方法。
import { Loading } from 'element-ui' let loading function startLoading() { loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.7)' }) } function endLoading() { loading.close() }
到这里,基本功能已经实现了。每发一个 post 请求,都会显示全屏 loading。同一时刻的多个请求合并为一次 loading,在所有响应都返回后,结束 loading。
功能增强
实际上,现在的功能还差一点。如果某个请求不需要 loading 呢,那么发请求的时候加个 showLoading: false的参数就好了。在请求拦截和响应拦截时判断下该请求是否需要loading,需要 loading 再去调用showFullScreenLoading()方法即可。
在封装 post 请求时,已经在第三个参数加了 config 对象。config 里包含了 showloading。然后在拦截器中分别处理。
// 请求拦截器 $.interceptors.request.use((config) => { if (config.showLoading) { showFullScreenLoading() } return config }) // 响应拦截器 $.interceptors.response.use((response) => { if (response.config.showLoading) { tryHideFullScreenLoading() } return response })
我们在调用 axios 时把 config 放在第三个参数中,axios 会直接把 showloading 放在请求拦截器的回调参数里,可以直接使用。在响应拦截器中的回调参数 response 中则是有一个 config 的 key。这个 config 则是和请求拦截器的回调参数 config 一样。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 生成人工智能:创意专家新的强大工具
- JavaScript能做什么?
- SQL中利用DMV进行数据库性能分析
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建
- 独家!万达网科大裁员后将转型AI 朱战备或接班曲德君
- Git分支管理的策略梳理
- 数据场景分析 线上线下商家到底谁能干过谁?
- 张钦坤:云计算、开放平台与服务商版权责任
- biztalk 2010 dev版安装小记
- 微信小程序如何获取组件实际高度
- flex4/flash builder中动态加载Module并与之交互的正确方式
- Google发布会看图的人工智能,让它来评评你的照片拍得好不好
- Git日常操作命令梳理
- Git忽略规则.gitignore梳理
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- CentOS7下使用Mondo Rescue实现系统全备份
- CentOS7下搭建Rsyslog Server记录远程主机系统日志
- 企业运维经典面试题汇总(4)
- 使用QEMU模拟树莓派Raspberry Pi
- Octave梯度下降法最优化代价函数的一个例子—ML Note 38
- Spring Boot入门系列(十八)mybatis 使用注解实现增删改查,无需xml文件!
- Mongodb多键索引之嵌套文档
- MySQL中的这几类日志,你一定要知道
- 微服务技术栈:API网关中心,落地实现方案
- 你的数据库服务器IO调度算法不对,难怪那么慢
- Android 11 强制用户使用系统相机?
- LeetCode题目38:外观数列
- GPUManager虚拟化方案
- [网络安全] 二.Web渗透信息收集之域名、端口、服务、指纹、旁站、CDN和敏感信息
- 程序员进阶系列:你真的懂 HelloWorld 吗?