同时多个axios请求_用 React+Antd 封装 Axios 实现全局 Loading 效果
前言
今天在做 react 后台管理的时候要实现一个全局 Loading 效果,通常使用 axios 库与后端进行数据交互。为了更好的用户体验,在每次请求前添加一个加载效果,让用户知道在等待加载。
要实现这个功能,我们可以在每个组件请求手动添加加载效果返回后再将其隐藏,但如果每个请求都这么做,就要做多次重复设置显得很麻烦,但好处是可以设置定制多种请求效果。但考虑到该项目场景为后台管理系统,给管理员使用,花样可以不用搞太多,统一优雅即可,故采取全局设置 loading 效果。
开发版本
"react": "^16.13.1","antd": "^4.0.4","axios": "^0.19.2"
代码说明
- 通过 axios 提供的请求拦截和响应拦截的接口,控制 loading 的显示或者隐藏。在此我还设置了没有网络和网络超时的提示信息
- 采用 antd 的 Spin 组件来实现 loading 效果,message 组件来进行消息提示(antd.css 这里没有引入,是因为我设置了按需加载)
- 定义变量 requestCount 作为计数器,确保同一时刻如果有多个请求的话,不会同时添加多个 loading,而是只有 1 个,并在所有请求结束后才会隐藏 loading。
- 默认所有请求都会自动有 loading 效果。如果某个请求不需要 loading 效果,可以在请求 headers 中设置 isLoading 为 false。
步骤
- 在 src 目录下新建一个文件 axios.js
import axios from 'axios';import React, { Component } from 'react';import ReactDOM from 'react-dom';import { message, Spin } from 'antd';
const Axios = axios.create({ // baseURL: process.env.BASE_URL, // 设置请求的base url timeout: 20000, // 设置超时时长})
// 设置post请求头Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 当前正在请求的数量let requestCount = 0
// 显示loadingfunction showLoading () { if (requestCount === 0) { var dom = document.createElement('div') dom.setAttribute('id', 'loading') document.body.appendChild(dom) ReactDOM.render("加载中..." size="large"/>, dom) } requestCount++}// 隐藏loadingfunction hideLoading () { requestCount--if (requestCount === 0) { document.body.removeChild(document.getElementById('loading')) }}// 请求前拦截Axios.interceptors.request.use(config => { // requestCount为0,才创建loading, 避免重复创建if (config.headers.isLoading !== false) { showLoading() }return config}, err => { // 判断当前请求是否设置了不显示Loadingif (err.config.headers.isLoading !== false) { hideLoading() }return Promise.reject(err)})// 返回后拦截Axios.interceptors.response.use(res => { // 判断当前请求是否设置了不显示Loadingif (res.config.headers.isLoading !== false) { hideLoading() }return res}, err => {if (err.config.headers.isLoading !== false) { hideLoading() }if (err.message === 'Network Error') { message.warning('网络连接异常!') }if (err.code === 'ECONNABORTED') { message.warning('请求超时,请重试') }return Promise.reject(err)})// 把组件引入,并定义成原型属性方便使用Component.prototype.$axios = Axiosexport default Axios
- 添加 loading 样式在共用的 css 文件里
#loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 9999; font-size: 20px;}
- axios 请求
// 1. 引入自定义axios文件路径// 2. 引入共用css文件(loading样式)// 3. 在react组件中正常写法请求url即可componentDidMount () { axios({ url: '/manage/statistic/base_count.do' }).then(res => { this.setState(res.data) })}
不加 loading 效果,这样写
axios({ url: '/manage/statistic/base_count.do', headers: { 'isLoading': false }}).then(res => { this.setState(res.data)})
效果
❝
欢迎关注我掘金账号和Github技术博客:
- 掘金:https://juejin.im/user/1257497033714477
- Github:https://github.com/Jacky-Summer
- 觉得对你有帮助或有启发的话欢迎 star,你的鼓励是我持续创作的动力~
- 如需在微信公众号平台转载请联系作者授权同意,其它途径转载请在文章开头注明作者和文章出处。
❞
同时多个axios请求_用 React+Antd 封装 Axios 实现全局 Loading 效果相关推荐
- axios请求拦截器错误_Axios使用拦截器全局处理请求重试
Axios拦截器 Axios提供了拦截器的接口,让我们能够全局处理请求和响应.Axios拦截器会在Promise的then和catch调用前拦截到. 请求拦截示例 axios.interceptors ...
- jquery发送ajax请求_复习之Vue用axios发送ajax请求
Axios是一个基于promise的HTTP库. 浏览器支持情况:Chrome.Firefox.Safari.Opera.Edge.IE8+. 官网:https://github.com/axios/ ...
- react http请求_当React开发者初次走进React-Native的世界
RN千机变 1.技术体系问题 RN和React共用一套抽象层,相对于前端,RN其实更接近Node的运行环境 ReactNative =React +IOS +Android 看RN文档时,我会发现入门 ...
- dio设置自定义post请求_强大的dio封装,可能满足你的一切需要
dio是一个强大的Dart Http请求库,支持Restful API.FormData.拦截器.请求取消.Cookie管理.文件上传/下载.超时.自定义适配器等.. 基本使用 添加依赖 depend ...
- react获取全局_使用react hooks实现的简单全局状态管理
注意,此代码存储库已被弃用,不会再更新维护了. Note that this code repository has been deprecated and will not be updated a ...
- dio设置自定义post请求_基于dio库封装flutter项目的标准网络框架
网络框架是每个应用的基石,封装一个好的网络框架不仅是项目的一个好的开始,并且直接影响到随后项目的稳定性和可扩展性.在移动开发的各个端都有非常赞的网络请求基础框架,比如Android的okhttp库.s ...
- layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
- React 16.x折腾记 - (7) 基于React+Antd封装聊天记录(用到React的memo,lazy, Suspense这些)
前言 在重构的路上,总能写点什么东西出来 , 这组件并不复杂,放出来的总觉得有点用处 一方面当做笔记,一方面可以给有需要的人; 有兴趣的小伙伴可以瞅瞅. 效果图 实现的功能 渲染支持图片,文字,图文 ...
- react + antd 封装一个图片预览,旋转,查看原图组件
最近在项目中的一个需求是, 小图点击可以弹框放大,然后能查看原图,顺时针一直旋转,每次90度. 实现方法: 使用react开发,所以直接选用antd 的组件, Upload .结合CSS3的旋转属性: ...
最新文章
- 开发笔记13 | 部署 Node.js 应用程序到云 ECS
- Lua中的字符串函数库
- Acwing第 1 场周赛【完结】
- Oracle 审计文件
- B. Product(2019ICPC西安邀请赛)(杜教筛)
- 记录一个SpringBoot集成邮件及工具类博客
- java urlrewrite_Java|urlrewrite|URL重写|多个参数
- 2.2基本算法之递归和自调用函数_用栈算法递归解决汉诺塔问题
- 基于JAVA+SpringMVC+MYSQL的在线课程学习系统
- python threading.loca讲解
- Kienct与Arduino学习笔记(2) 深度图像与现实世界的深度图的坐标
- Lightroom Classic 教程,如何在 Lightroom 中创建晕影?
- iOS 评论中含有表情的处理方法
- java 修改mysql密码_mysql数据库忘记密码时如何修改
- 安装程序检测到无法验证文件的发行者_文件的校验方法
- 高斯克吕格投影 python2.x 版本
- 1.17 用Laplace变换解常微分方程
- abb机器人goto指令用法_ABB机器人的指令详细介绍!!!
- 如何制作六一儿童节答题测试H5页面?
- 计算机音乐名词解释,音乐常见名词解释
热门文章
- word里双横线怎么打_美人计 | 精致打工人秀智,教你内双怎么化
- PowerBI,自定义编辑同一页面中不同图表之间的交互,使页面交互更灵活
- 模型评价 - 机器学习与建模中怎么克服过拟合问题?
- 合并数据 - 方法总结(concat、append、merge、join、combine_first)- Python代码
- 超硬核 ICML’21 | 如何使自然语言生成提速五倍,且显存占用减低99%
- Spring Boot中使用@Scheduled创建定时任务
- Category 特性在 iOS 组件化中的应用与管控
- BAT面试进阶:最全Memcached面试30题含答案
- 风控模型师面试准备--技术篇(逻辑回归、决策树、集成学习)
- phpstorm 不能自动打开上次的历史文件