react项目全局loading实现
作者:互联网
最近在做一个后台管理系统供内部人员使用,交互性没有那么强,所以对于每个页面请求时要加loading,感觉要写的比较麻烦,然后去百度了下能不能全局实现loading:
需要loading的请求发出后,让loading显示,请求后无论成功还是失败就让loading关闭
大概代码如下:
const { request } = require("http") // 当前正在请求的数量 let requestCount = 0 // 显示loading const showLoading = () => { if (requestCount === 0) { // 解决一个页面多个接口请求需要loading const dom = document.createElement('div') dom.setAttribute('id', 'loading') document.body.appendChild(dom) ReactDOM.render(<Spin tip="加载中" size="large" />, dom) } requestCount ++ } // 隐藏loading const hideLoading = () => { requestCount -- if (requestCount === 0) { document.body.removeChild(document.getElementById('loading')) } } // eg: if (options?.headers?.isLoading) { showLoading() } fetch().then(() => { if (options?.headers?.isLoading) { hideLoading() } // DO SOME }).catch(() => { if (options?.headers?.isLoading) { hideLoading() } }) // 外部调用 request(url, { headers: { isLoading: true } })
标签:loading,const,react,headers,requestCount,isLoading,全局,document 来源: https://www.cnblogs.com/yxfboke/p/14263828.html