参照dva-loading使用async和await完成全局loading

最新推荐文章于 2024-11-07 18:53:37 发布

小鬼难缠

最新推荐文章于 2024-11-07 18:53:37 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zjscy666/article/details/88375519

本文介绍如何使用ES7的Promise.all特性优化React应用中的全局加载状态控制。通过并发处理多个AJAX请求，实现加载前显示loading，全部请求结束后自动隐藏，避免传统轮询的延时性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家都知道react有生命周期，我们想有个方法监听全局的ajax和元素渲染，完成前loading，完成后loading消失，难点在于多个ajax请求，你很难有效的判断啥时候全部ajax请求结束，传统的方案是轮询，但是这种方案具有一定的延时性，我们想着如果能让程序自己判断就好啦，于是我们就想到了es7。

下面我们赶紧上代码：

你没看错，就是这么简单，所谓大道至简就是这样。

这里有2个要注意的地方，第一个是Promise.all里面的都是并发，ajax1和ajax2都必须是async类型，不然这个监听是不生效的，第二个问题如果有页面上的元素操作的（不耗时）写在Promise.all上面，防止切换页面的时候报错。showLoading和hideLoading其实是通过setState来控制页面loading元素的显隐。大家也可以封装成一个方法，这样就可以减少代码量了。