react+ant.d添加全局loading方式
更新时间：2024年01月24日 15:20:54 作者：土豆Coder
这篇文章主要介绍了react+ant.d添加全局loading方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
背景
先上个应景图，哈哈哈！
本篇博客中的方法也是前两天刚接触redux时给了我的一点启发，可以从这里着手来实现这个功能。而且，事实证明，确实满足了我的需求。
项目开发中往往需要在接口返回较慢的时候给出loading状态，防止在接口返回值的过程中用户多次点击，之前我们在Vue中也添加过这个功能，而且还在其中遇到过由于单例模式出现的问题，以及如何解决这个问题大家可以自行百度。
Vue中全局loading组件直接通过创建实例的方式，在ant.d中我们的Spin组件需要包裹想要遮罩的元素，我们如何在请求接口的入口统一添加全局loading呢？
这里我们就用到了redux（react+redux超简单入门实例这里可以带你迅速了解并使用redux）
使用redux实现全局Loading
添加Spin
首先在main文件中添加全局Spin，main.js文件包裹了所有菜单栏所包含的内容（除了登录页，基本都包含在这里）
// main.js
import React, { Component } from 'react'
import AppMenu from '../../components/app-menu'
import AppBreadCrum from '../../components/app-breadcrum'
import { Switch, Route } from 'react-router-dom'
import { mainRoutes } from '../../router'
import { Spin } from 'antd'
import store from '../../store'
class Main extends Component {
state = {
loading: false
}
render () {
const { layout, ...rest } = this.props
let { loading } = this.state
return (
<Spin spinning={loading} wrapperClassName="page-loading">
<div className="main">
<AppMenu {...rest}></AppMenu>
<div className="app-right">
<AppBreadCrum {...rest}></AppBreadCrum>
<div className="app-bottom">
<Switch>
{mainRoutes.map(route => (<Route exact key={route.path} path={route.path} component={route.component}></Route>))}
</Switch>
</div>
</div>
</div>
</Spin>
)
}
}
export default Main
接口拦截设置Loading显示
我们需要在接口发出请求的时候设置Loading显示，在返回以后设置其为隐藏。
actions
定义两个action动作，一个用来打开loading一个用来关闭loading
// actions/index.js export const OPENPAGELOADING = 'OpenPageLoading' export const CLOSEPAGELOADING = 'ClosePageLoading'
reducers
通过不同事件来触发值的改变
// reducers/index.js
import { OPENPAGELOADING, CLOSEPAGELOADING } from '../actions'
const initState = {
pageLoadingVal: false
}
const AppReducer = (state=initState, action) => {
switch (action.type) {
case OpenPageLoading: {
return {
pageLoadingVal: true
}
}
case ClosePageLoading: {
return {
pageLoadingVal: false
}
}
default: {
return state
}
}
}
export default AppReducer
store
// store/index.js
import { createStore } from 'redux'
import AppReducer from '../reducers'
const store = createStore(AppReducer)
export default store
引入
// index.js
...
import store from './store'
ReactDOM.render(
<Provider store={store}>
<ConfigProvider locale={antdZhCn}>
<Router>
<App />
</Router>
</ConfigProvider>
</Provider>,
document.getElementById('root')
)
http.js
接口入口文件中设置全局的值
import axios from 'axios'
import { message } from 'antd'
import store from '../store'
import { OPENPAGELOADING, CLOSEPAGELOADING } from '../actions'
let instance = axios.create({
baseURL: '',
timeout: 5000
})
/* 请求拦截 */
instance.interceptors.request.use(config => {
store.dispatch({type: OPENPAGELOADING})
return config
}, error => {
store.dispatch({type: CLOSEPAGELOADING })
message.error('请求超时')
return Promise.reject(error)
})
/* 响应拦截 */
instance.interceptors.response.use(response => {
store.dispatch({type: CLOSEPAGELOADING })
let { data } = response
if (data && data.code && data.code === 200) {
return data
} else if (data && data.code && data.code === 500) {
message.error(data.msg || '获取接口数据错误')
return Promise.reject()
}
}, error => {
store.dispatch({type: CLOSEPAGELOADING })
message.error('服务错误')
return Promise.reject(error)
})
export default instance
在发出接口请求的时候通过store.dispatch({type: 'OpenPageLoading'})派发操作
需要注意的时候，在无论接口返回是什么的情况下需要通过store.dispatch({type: 'ClosePageLoading'})来关闭loading。
监测store中loading值设置是否显示Spin
到此为止我们store中的全局loading的值已经发生了满足需求的改变，
下面要做的就是在每次值发生改变的时候我们能在使用Spin的地方监听到，
说到监听是不是就想到了store提供的subscribe方法呢？怎么做呢？
// main.js
import React, { Component } from 'react'
import AppMenu from '../../components/app-menu'
import AppBreadCrum from '../../components/app-breadcrum'
import { Switch, Route } from 'react-router-dom'
import { mainRoutes } from '../../router'
import { Spin } from 'antd'
import store from '../../store'
class Main extends Component {
state = {
loading: false
}
componentDidMount () {
// 重点
// 重点
// 重点
// 监听store中pageLoadingVal值
store.subscribe(() => {
let storeState = store.getState()
this.setState({
loading: storeState.pageLoadingVal
})
})
}
render () {
const { layout, ...rest } = this.props
let { loading } = this.state
return (
<Spin spinning={loading} wrapperClassName="page-loading">
// ...
</Spin>
)
}
}
export default Main
是的，通过监听来设置当前组件的state的值。
优化
如果你一个页面只有一个接口，那么你完成上述就搞定了。
但是，如果你一个页面有多个接口，当其中有个接口返回值很慢的时候你就会发现问题，就是当一个接口pending结束全局loading就消失了，这个当然不是我们想要的结果，理想的亚子是当前页面所有接口都pending结束后才消失loading。
这个问题之前在做elementUI+Vue做全局loading时候也遇到过，其实思路是一样的，思路可参考elementUI全局Loading单例模式。
因为创建全局loading的方式不同，所以这里思路一样，代码稍有不同
// http.js
import axios from 'axios'
import { message } from 'antd'
import store from '../store'
import { OPENPAGELOADING, CLOSEPAGELOADING } from '../actions'
let instance = axios.create({
baseURL: '',
timeout: 5000
})
/* 添加一个计数器 */
let needLoadingRequestCount = 0
function showFullScreenLoading () {
if (needLoadingRequestCount === 0) {
store.dispatch({type: OPENPAGELOADING})
}
needLoadingRequestCount++
}
function tryHideFullScreenLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
store.dispatch({type: CLOSEPAGELOADING})
}
}
/* 请求拦截 */
instance.interceptors.request.use(config => {
showFullScreenLoading()
return config
}, error => {
tryHideFullScreenLoading()
message.error('请求超时')
return Promise.reject(error)
})
/* 响应拦截 */
instance.interceptors.response.use(response => {
tryHideFullScreenLoading()
let { data } = response
if (data && data.code && data.code === 200) {
return data
} else if (data && data.code && data.code === 500) {
message.error(data.msg || '获取接口数据错误')
return Promise.reject()
}
}, error => {
tryHideFullScreenLoading()
message.error('服务错误')
return Promise.reject(error)
})
export default instance
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解关于React-Router4.0跳转不置顶解决案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
React使用useEffect解决setState副作用详解
这篇文章主要为大家介绍了React使用useEffect解决setState副作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
react不同于vue，通过在路由里设置meta元字符实现路由拦截。本文就详细的介绍一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要给大家介绍了关于利用React如何实现浏览器打印部分内容的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
本文主要介绍了react为什么不推荐使用index作为key，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
React的useEffect Hook它允许我们在函数组件中执行副作用操作,但在使用过程中可能会遇到一些常见的错误,本文就来介绍一下常见问题及解决,感兴趣的可以了解一下2023-10-10
邮箱、手机验证码输入是许多在线服务和网站常见的安全验证方式之一,本文主要来和大家讨论一下如何使用React封装一个验证码输入控件,感兴趣的可以了解下2024-03-03
这篇文章主要介绍了React之echarts-for-react源码解读,echarts-for-react的源码非常精简，本文将针对主要逻辑分析介绍，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了使用React Native创建以太坊钱包，实现转账等功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
下面小编就为大家带来一篇react native实现往服务器上传网络图片的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论