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

前言

今天在做 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 目录下新建一个文件 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

// 显示loading
function 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
  1. 添加 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;
}
  1. 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)
})

效果

3a9718b05699142f848163bb6b339e37.gif

欢迎关注我掘金账号和Github技术博客:

  • 掘金:https://juejin.im/user/1257497033714477
  • Github:https://github.com/Jacky-Summer
  • 觉得对你有帮助或有启发的话欢迎 star,你的鼓励是我持续创作的动力~
  • 如需在微信公众号平台转载请联系作者授权同意,其它途径转载请在文章开头注明作者和文章出处。

4e9ed13407a857cc4f0c8d9728e0f62d.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jdk8 stream去重复_重复文件查找和清理工具

在Mac上怎样可以快速搜索和清理重复文件呢?小编建议您使用Tidy Up for Mac,是非常强大而使用简单的一款重复文件清理工具,Tidy Up 5带有简单的搜索模式,并且包括80多种预定义的智能搜索,可以快速而准确的帮助您查找重复…

《科学》杂志展望2020年十大科学头条

来源:新华网 美国《科学》杂志2日刊文展望了2020年可能成为头条的十大科学新闻,中国建造全球首台E级超算、“基因剪刀”技术发布临床试验结果等入榜。这一权威学术刊物预测,中国有望在2020年建造出世界第一台E级超算。E级超算即百亿亿次超级计…

visual2019没有勾选的在如何加入_【CAD教程】CAD软件中如何打散不可分解的块?...

你我共享,快乐学习☀想认识志同道合的朋友一起学习CAD?请加入我们的QQ群648869816CAD中打散图块可以用“分解”命令(快捷键是X)。但是如果出现定义块的“允许分解”前面没有打钩,那么这个块形成后是无法通过X分解的,如下图所示。那…

哪些动物拥有惊人的数学天赋?

来源:新浪科技猩猩、鹦鹉、蜜蜂, 甚至连老鼠都会数数,它们甚至还会计算。这种能力是动物们物竞天择的优势,例如,在觅食时的优势。动物的数学天赋已经被科学家研究过很多次了,每次结果都很有趣。知道有多少敌…

c语言中有关main的问题,c语言小问题

2008-03-13while语句void main(){int a0,n;printf("\n input n: ");scanf("%d",&n);while (n--)printf("%d ",a*2);}do-while语句void main(){int a0,n;printf("\n input n: ");scanf("%d",&n);do printf("%d …

miniui 样式第一次加载不出来_小程序设计规范及经验分享(附最新样式库)

点击上方蓝字,关注行设视觉本文已获得作者授权,发布于行设视觉,转载请注明出处。作者 | 孙青Cynthia_Sunhttps://www.zcool.com.cn/article/ZOTM4NjQ0.html2019 新版小程序控件设计规范源文件见底部说明正文最近设计群里经常有人问起小程序设…

c语言软件电脑下载文件,求C语言头文件下载?

传统 C#include <assert.h> //设定插入点#include <ctype.h> //字符处理#include <errno.h> //定义错误码#include <float.h> //浮点数处理#include <fstream.h> //文件输入&#xff0f;输出#include <iomanip.h> //参数化输入&#xff0f…

从 AlphaGo 到具有人类智慧的 AI 究竟有多远?François Chollet 有了一些新想法

图片来自Alex Castro / The Verge来源&#xff1a; AI科技评论编译&#xff1a; 龚倩编辑&#xff1a;丛末测量人工智能的「智慧」是计算机科学领域中最棘手但最重要的问题之一。如果你不明白你今天制造的机器是否比昨天更聪明&#xff0c;那你怎么知道你在进步&#xff1f;乍一…

3.17作业

3.17作业 选择你喜欢的花 1. 布局设计代码 <TextViewandroid:layout_width"wrap_content"android:layout_height"wrap_content"android:layout_gravity"center"android:text"Please choose a flower you like!"android:textSize&qu…

listctrl 优化_教育培训网站SEO优化,新的网站SEO优化整体外包费用

原标题&#xff1a;教育培训网站SEO优化&#xff0c;新的网站SEO优化整体外包费用百度营销凭借强大的用户产品优势&#xff0c;每天数十亿次搜索请求、超过1亿用户浏览百度信息流、800亿次定位服务请求&#xff0c;为客户提供全系列产品广告资源覆盖用户生活全场景。百度搜索se…

c语言楼梯有10级台阶,C语言小程序之没事爬楼梯

题目有39级台阶&#xff0c;每一步只能走1阶或者2阶。如果需要走偶数步&#xff0c;求上台阶的方案数。分析拿到题目就是一通分析&#xff0c;39是奇数&#xff0c;一次走1阶或者两阶。。。那么就有&#xff1a;1*x2y39&#xff0c;x得是个奇数。。。要求走偶数步&#xff0c;那…

【周末阅读】2019自动驾驶十大关键词

来源&#xff1a;智车科技作者&#xff1a;曾晶、桂艳琳、唐沛祥回看过去2019年自动驾驶行业的“关键词”&#xff0c;从中感受这一年自动驾驶的变化与趋势。关键词一&#xff1a;交通强国2019年9月&#xff0c;中共中央、国务院印发了《交通强国建设纲要》&#xff08;以下简称…

【adb】电脑通过ADB向手机设备传输文件

具体步骤如下&#xff1a; Step1 下载ADB工具 下载最新版本的 ADB工具 !!! 注意&#xff1a;一定要是最新版本的ADB&#xff0c;否则很可能导致无法识别到手机。 将下载的ADB解压以后的文件如下图所示&#xff1a; Step2 添加环境变量 将 ABD 的路径 D:\platformtools &am…

apple usb ethernet adapter驱动_佳能Canon PIXMA MG3620一体机驱动下载 v1.01官方版

软件标签&#xff1a;佳能MG3620是一款无线喷墨多功能一体机&#xff0c;拥有打印、复印、扫描等多种功能&#xff0c;并且支持手机控制进行操作&#xff0c;可以大大地提高办公效率。如果你遇到了该一体机连接电脑时无反应&#xff0c;那就是缺少了小编推荐的佳能MG3620驱动程…

图解Javascript——作用域、作用域链、闭包

什么是作用域&#xff1f; 作用域是一种规则&#xff0c;在代码编译阶段就确定了&#xff0c;规定了变量与函数的可被访问的范围。全局变量拥有全局作用域&#xff0c;局部变量则拥有局部作用域。 js是一种没有块级作用域的语言(包括if、for等语句的花括号代码块或者单独的花括…

除了欧拉公式,这8个数学公式也足够美丽且神奇

来源&#xff1a;算法与数学之美1概率分布公式

canvas rotate 累加旋转_震惊,canvas文字粒子效果,只需要100行代码,简单易懂。

震惊,canvas文字粒子效果&#xff0c;只需要100行代码&#xff0c;简单易懂。canvas是使用JavaScript程序绘图(动态生成),相比于css&#xff0c;可以更加简单方便的绘制细节的样式。其中最强大的功能莫过去像素的处理。一个像素一个像素去绘制任何想要的展示效果。接下来&#…

CES 2020前瞻:一份最全的趋势预测报告

来源&#xff1a; CES20202020年&#xff0c;消费级技术领域的总体趋势可以总结为&#xff1a;最顶尖的产品将变得更强大、更完善。虽然我们并不喜欢“溢价”这个已经被用滥了的字眼&#xff0c;但不得不承认&#xff0c;新一年中溢价会成为新的常态。最好的东西会变得更好&…

Android pda出入库管理,出入库PDA管理系统软件

随着经济的高速发展&#xff0c;市场的日新月异&#xff0c;仓库管理越来越重要起来&#xff0c;企业里从原料的入库到成品的出库都需经过仓库来管理控制&#xff0c;仓库工作责任重大、数据即时准确犹为关键&#xff0c;现代企业大多都借助出入库管理系统软件来管控仓库&#…

一棵树的生物量怎么算_桂花开花小、开花少怎么办?四点建议送给你!

原标题&#xff1a;桂花开花小、开花少怎么办&#xff1f;四点建议送给你&#xff01;虽然冬天绝大多数桂花都处在休眠期&#xff0c;生长缓慢&#xff0c;不开花&#xff0c;但四季桂花是个例外&#xff0c;只要温度合适养护得当&#xff0c;冬天也能让我们闻到桂花香。桂花开…