【react项目全局loading实现】

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(, 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 } })