react如何控制全局loading_用React+Antd封装Axios实现全局Loading效果

最新推荐文章于 2024-06-06 16:15:36 发布
最新推荐文章于 2024-06-06 16:15:36 发布
阅读量2.2k 收藏 1
点赞数 1
文章标签： react如何控制全局loading
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42466331/article/details/112015412
版权

前言

今天在做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。

步骤

1.在src目录下新建一个文件axios.js

import axios from 'axios&

最低0.47元/天 解锁文章
江南好风光
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
同时多个axios请求_用 React+Antd 封装 Axios 实现全局 Loading 效果
weixin_39901203的博客
12-20 263
前言今天在做 react 后台管理的时候要实现一个全局 Loading 效果，通常使用 axios 库与后端进行数据交互。为了更好的用户体验，在每次请求前添加一个加载效果，让用户知道在等待加载。要实现这个功能，我们可以在每个组件请求手动添加加载效果返回后再将其隐藏，但如果每个请求都这么做，就要做多次重复设置显得很麻烦，但好处是可以设置定制多种请求效果。但考虑到该项目场景为后台管理系统，给...
Vue3 + TS + Antd + Pinia 从零搭建后台系统(三) Pinia + 全局loading + 公共方法
zuo0407的博客
06-07 314
想了解Pinia的可看该博主的文章，挺详细的。此篇不做讲解，只讲实际应用。此处为了接口的规范性，添加了interface。在api文件夹中添加接口文件types.ts。
react 把前后台的axios请求放在一起_用React+Antd封装Axios实现全局Loading效果
weixin_42515561的博客
02-11 670
前言今天在作react后台管理的时候要实现一个全局Loading效果，一般使用axios库与后端进行数据交互。为了更好的用户体验，在每次请求前添加一个加载效果，让用户知道在等待加载。css要实现这个功能，咱们能够在每一个组件请求手动添加加载效果返回后再将其隐藏，但若是每一个请求都这么作，就要作屡次重复设置显得很麻烦，但好处是能够设置定制多种请求效果。但考虑到该项目场景为后台管理系统，给管理员使用，...
React 学习笔记 15 （antd && axios实现全局Loading）
车联网开发的博客
09-25 687
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+Axios学习总结
JavaAlliance
09-11 2290
一. 一些基本概念 关于Node。 Node.js 是一个JavaScript 的运行环境，可以让JavaScript运行在服务端。 Node让JS也可以写网站后台程序，可以搭建WEB服务器。 （上面是我胡说的我其实并不知道它是怎么回事。） 关于ES6。 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。React默认把ES6做为首选标准，其写法可能同以往不太一样。...
从0搭建react+ts+redux+axios+antd项目
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
02-01 1252
介绍了从0搭建一个react+ts+redux+axios+antd项目及相关配置和使用。
react+ts+ant+proxy+less+axios封装+全局loading和一些常用封装
Call_me_small_pure的博客
03-31 613
初始化项目 npx create-react-app projectname --template typescript 目录简介 node_modules public // 不参与文件打包，存放静态文件 favicon.ico index.html logo192.png logo512.png manifest.json // 配置pwa的，不用管 robots.txt // 搜索引擎怎么对待项目的一些配置：Disallow：/user，不允许搜索引擎访问user下.
vite+react+antd+axios小白搭建教程
xiaoxiongxia的博客
06-09 623
react框架搭建
react+vite+axios+antd+react-router搭建项目
weixin_43857940的博客
06-06 922
react+vite+axios+antd+react-router搭建项目
TS+React+Mobx+Antd+Axios快速配置
qq_45669199的博客
09-23 415
TS+React+Mobx+Antd+Axios基本配置 基本操作 # ★★★前提条件(可以运行create-react-app和yarn)★★★ # 创建项目(后面的操作记住进入项目根目录) create-react-app 项目名 --template typescript # 添加antd和axios yarn add antd@3.22.0 axios@0.21.1 # 配置mobx(在TS中使用注解需要根据提示配置) # 安装改变 create-react-app 中 webpack 配置插
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+antd+axios
04-11
react+antd+axios
react_basic_frame:react + antd + react-router-dom + axios
03-29
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行该应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒...
react+mobx+router+axios+antd搭建单页应用
01-20
本文将详细介绍如何使用React、MobX、React Router、Axios和Ant Design这五个核心技术来搭建一个单页应用。 首先，我们需要初始化项目。React是Facebook推出的用于构建用户界面的JavaScript库，它采用组件化思想，...
从0搭建react+ts+redux+axios+antd项目代码
02-01
下载解压后启动项目：npm i > npm start 文章链接：https://blog.csdn.net/ganyingxie123456/article/details/135953039?spm=1001.2014.3001.5501
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值