Vue 项目多个 axios 请求下 loading 处理
每当一个请求结束, loadingCount 减 1,并判断 loadingCount 是否为 0,如果为 0,则关闭 loading;造成的后果就是页面请求还没完成,loading 却关闭了,用户会以为页面加载完成了,结果页面不能正常运行,导致用户体验不好。假如现在同时发起两个请求,在请求前,拦截器 this.isShowLoading = true 将 loading 打开。这个拦截器的功能是
一般情况下,在 vue 中结合 axios 的拦截器控制 loading 展示和关闭,是这样的:
在 App.vue 配置一个全局 loading。
<div class="app">
<keep-alive :include="keepAliveData">
<router-view/>
</keep-alive>
<div class="loading" v-show="isShowLoading">
<Spin size="large"></Spin>
</div>
</div>
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客
同时设置 axios 拦截器
// 添加请求拦截器
this.$axios.interceptors.request.use(config => {
this.isShowLoading = true
return config
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
// 添加响应拦截器
this.$axios.interceptors.response.use(response => {
this.isShowLoading = false
return response
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
这个拦截器的功能是在请求前打开 loading,请求结束或出错时关闭 loading。
如果每次只有一个请求,这样运行是没问题的。但同时有多个请求并发,就会有问题了。
举例:
假如现在同时发起两个请求,在请求前,拦截器 this.isShowLoading = true 将 loading 打开。
现在有一个请求结束了。this.isShowLoading = false 拦截器关闭 loading,但是另一个请求由于某些原因并没有结束。
造成的后果就是页面请求还没完成,loading 却关闭了,用户会以为页面加载完成了,结果页面不能正常运行,导致用户体验不好。
解决方案
增加一个 loadingCount 变量,用来计算请求的次数。
loadingCount: 0
再增加两个方法,来对 loadingCount 进行增减操作。
methods: {
addLoading() {
this.isShowLoading = true
this.loadingCount++
},
isCloseLoading() {
this.loadingCount--
if (this.loadingCount == 0) {
this.isShowLoading = false
}
}
}
现在拦截器变成这样:
// 添加请求拦截器
this.$axios.interceptors.request.use(config => {
this.addLoading()
return config
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error('网络异常,请稍后再试')
return Promise.reject(error)
})
// 添加响应拦截器
this.$axios.interceptors.response.use(response => {
this.isCloseLoading()
return response
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error('网络异常,请稍后再试')
return Promise.reject(error)
})
这个拦截器的功能是:
每当发起一个请求,打开 loading,同时 loadingCount 加 1;
每当一个请求结束, loadingCount 减 1,并判断 loadingCount 是否为 0,如果为 0,则关闭 loading;
这样即可解决多个请求下有某个请求提前结束,导致 loading 关闭的问题。
更多推荐
所有评论(0)