react项目全局loading实现

2021-01-11 19:34:27 阅读：1185 来源： 互联网

标签：loading const react headers requestCount isLoading 全局 document

最近在做一个后台管理系统供内部人员使用，交互性没有那么强，所以对于每个页面请求时要加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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react项目全局loading实现