同时多个axios请求_用 React+Antd 封装 Axios 实现全局 Loading 效果

最新推荐文章于 2024-06-29 15:49:13 发布
最新推荐文章于 2024-06-29 15:49:13 发布
阅读量348 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 同时多个axios请求
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39901203/article/details/111624118
本文介绍如何在React应用中利用Ant Design的Spin组件和axios的拦截器，实现全局Loading效果。通过计数器requestCount管理多个并发请求，确保只显示一个Loading，并提供无Loading效果的选项。详细步骤包括创建axios.js文件、添加loading样式和设置请求拦截器。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

今天在做 react 后台管理的时候要实现一个全局 Loading 效果，通常使用 axios 库与后端进行数据交互。为了更好的用户体验，在每次请求前添加一个加载效果，让用户知道在等待加载。

要实现这个功能，我们可以在每个组件请求手动添加加载效果返回后再将其隐藏，但如果每个请求都这么做，就要做多次重复设置显得很麻烦，但好处是可以设置定制多种请求效果。但考虑到该项目场景为后台管理系统，给管理员使用，花样可以不用搞太多，统一优雅即可，故采取全局设置 loading 效果。

开发版本

"react": "^16.13.1",
"antd": "^4.0.4",
"axios": "^0.19.2"

代码说明

  1. 通过 axios 提供的请求拦截和响应拦截的接口，控制 loading 的显示或者隐藏。在此我还设置了没有网络和网络超时的提示信息
  2. 采用 antd 的 Spin 组件来实现 loading 效果，message 组件来进行消息提示(antd.css 这里没有引入，是因为我设置了按需加载)
  3. 定义变量 requestCount 作为计数器，确保同一时刻如果有多个请求的话，不会同时添加多个 loading，而是只有 1 个，并在所有请求结束后才会隐藏 loading。
  4. 默认所有请求都会自动有 loading 效果。如果某个请求不需要 loading 效果，可以在请求 headers 中设置 isLoading 为 false。

步骤

  1. 在 src 目录
最低0.47元/天 解锁文章

200万优质内容无限畅学
react axios 跨域访问一个或多个域名问题
11-21
1.react + axios 跨域访问一个域名 配置非常简单，只需要在当前的 package.json 文件里面配置： “proxy”:”http://iot-demo-web-dev.autel.com”, //当然，这里是一个假地址 像这样： 这样跨域便完成了，当然，也可以像网上那样，多几段代码，像这样： 我不知道你们写入这段代码会怎么样，反正我是会报错，具体报错是怎么我这里没办法展示，因为我的项目已经 运行了 npm run eject 这个命令 报错的意思大概就是 proxy 希望得到的是一个字符串，而现在得到的是一个对象，所已我只能采取 第一张图片的方法进行跨域 而后我们安
go web net/http【1】处理URL详解
爱死亡机器人
03-14 2430
参考链接： https://mojotv.cn/2019/07/30/golang-http-request
react 把前后台的axios请求放在一起_多个Axios请求进入ReactJS状态
weixin_39677538的博客
12-21 157
So I have been placing the following code within my React JS component and I am basically trying to put both API calls into one state called vehicles however I am getting an error with the following c...
等待多个请求（请求并发执行）都完成后结束Loading框
fengxiandada的博客
11-26 840
等待多个请求（请求并发执行）都完成后结束Loading框
react 合并数组_React 数组合并去重，实现请求三遍返回三组数据的合并去重。
weixin_39711441的博客
12-19 728
需求：用三个不同参数请求三遍，返回的数据进行合并去重，如果重复的话只保留第一条。getDataAll = () => {this.props.beginLoadingData();let requestArray = [];requestArray.push(this.getData("one"));//传入参数requestArray.push(this.getData("two"));/...
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
React 学习笔记 15 （antd && axios实现全局Loading）
车联网开发的博客
09-25 802
utils/intercepter.js /** * Discription: 封装interceptor * author: ydj * Date: 2021-09-25 14:29:45 */ import axios from 'axios' import { message } from 'antd' /** * 生成基础axios对象，并对请求和响应做处理 * 前后端约定接口返回解构规范 * { * code:200, * data:"成功",
React+antd后台管理系统模板
12-01
这个模板主要用于开发者熟悉React和antd组件库的使用，同时也展示了如何在React应用中集成react-router进行页面路由管理。让我们深入了解一下这个项目所涵盖的关键知识点。 1. **React**：React是Facebook开发的...
react Hooks+axios+antd+TypeScript，简单实现接口请求loading效果
北冥の魚
05-27 453
文件后缀为tsx 发送请求时showLoading(), 请求失败hideLoading() import ReactDOM from 'react-dom'; import axios from 'axios'; import Qs from "qs"; import {Spin} from "antd"; const Axios = (url:string,method:any='get',params:{}={}, isAuth:boolean=false)=>{ const Base
以 Vue 3 项目为例，多个请求下如何全局封装 Loading 的展示与关闭？其中大有学问！
最新发布
CodeQi技术小栈的博客
06-29 1116
#app {
react 把前后台的axios请求放在一起_用React+Antd封装Axios实现全局Loading效果
weixin_42515561的博客
02-11 775
前言今天在作react后台管理的时候要实现一个全局Loading效果，一般使用axios库与后端进行数据交互。为了更好的用户体验，在每次请求前添加一个加载效果，让用户知道在等待加载。css要实现这个功能，咱们能够在每一个组件请求手动添加加载效果返回后再将其隐藏，但若是每一个请求都这么作，就要作屡次重复设置显得很麻烦，但好处是能够设置定制多种请求效果。但考虑到该项目场景为后台管理系统，给管理员使用，...
axios合并异步请求
Jane_96的博客
10-25 4216
axios合并异步请求，比如页面初始化的时候需要进行三次请求，而我们需要在这三个请求都结束后进行操作。但是由于我们无法确认异步什么时候结束，所以可以使用axios请求来将三个请求合并发送（注意：发送的仍然是三个请求，并不是合并成了一个请求），最后可以等这三个请求都结束后开始想进行的操作 initData1 = () => { return axios.get(baseUrl1, { ...
Axios多个请求方式
lalala
06-16 470
初学axios做个记录 请求方式大致分为： axios(config) axios.get(url[, config]) axios.delete(url[, config] axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 1. axios(config) 使用axios直接发起请求 .
react实现axios
weixin_40593587的博客
09-20 333
打开项目的根路径，运行npm install axios --save 这个一般安装起来很慢，一般使用cnpm install axios --save 在哪里使用就在哪里引用 import axios from 'axios' 代码如下： importReact,{Component}from'react'; importaxiosfrom'axios'; class...
react中axios结合后端实现GET和POST请求
虚怀若愚
03-23 4805
文章目录get实现方式1（参数直接在url中）get时间方式2（作为JSONString跟在url末尾）post实现（传递JSONObject） 区别在这里不做介绍了，POST方法比GET方法稍微安全一点，GET方法比POST方法要快一些，个人感觉传递单个参数用GET，传递多个参数用POST。 get实现方式1（参数直接在url中） 前端 export function getAllSubstat...
react 组件axios 交互请求笔记
热门推荐
hopefullman的博客
10-13 1万+
本文只是初级介绍axios最基本用法（get,post,all请求），至于扩展和延伸只是没有过多赘述，更多内容可以参看axios官网。如有不周之处还请谅解。 个人建议使用npm安装开始项目（进入到相关命令行工具中操作即可） 使用npm： $ npm i axios tip： react在引进axios时所用 '' 实际为 `` 即反引号！好处就是不用拼接字符串``,遇到变量就是${}就可...
react-08-04 实现简单登录功能
代码哥19950715的博客
08-16 847
1.Login.jsx 直接获取数据 const result =await reqLogin(username,password) //const result = response.data //{status:0,data: user} {status:1,message: 'xxx'} if (result === 0){ //登录成功 //提示成功 m...
Golang标准库http/url的Values详解
ZoMaster的博客
09-17 952
在Go语言的标准库中，http/url包提供了一组用于解析和构建URL的函数和类型。其中，Values类型是一个关键的结构，它允许我们在URL中传递和处理查询参数。Values类型本质上是一个map[string][]string，它表示URL中的键值对。Values类型本质上是一个map[string][]string，它表示URL中的键值对。在上面的示例中，我们首先创建了一个空的Values对象，然后使用Set和Add方法添加了两个查询参数。Set方法用 = 2;
前端 vue中axios拦截错误信息一下会有很多报错信息，封装下Message让错误信息只出现一次
csstmg的博客
06-13 1519
【代码】前端 vue中axios拦截错误信息一下会有很多报错信息，封装下Message让错误信息只出现一次。
掌握React基础框架：React+antd+react-router-dom+axios快速入门
该资源是一个基于React技术栈的入门级项目，涵盖了React框架的使用，同时集成了Ant Design（antd）作为UI组件库，react-router-dom作为路由解决方案，以及axios用于处理HTTP请求。以下是该项目涉及的主要知识点： 1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值