用Axios Element 实现全局的请求 loading:
背景
业务需求是这样子的,每当发请求到后端时就触发一个全屏的 loading,多个请求合并为一次 loading。现在项目中用的是 vue 、axios、element等,所以文章主要是讲如果使用 axios 和 element 实现这个功能。就是在每次页面加载的时候,页面都会发起请求,这个时候就需要使用loading来过度这个过程。
分析
首先,请求开始的时候开始 loading, 然后在请求返回后结束 loading。重点就是要拦截请求和响应。
然后,要解决多个请求合并为一次 loading。
最后,调用element 的 loading 组件即可。
拦截请求和响应
axios 是每次发送请求。都会有一个拦截器。主要是在请求之前,开始loading,响应之后,结束loading,这是主要的开发流程。
创建axios拦截器
// 请求拦截器
$.interceptors.request.use((config) => {
if (config.showLoading) {
showFullScreenLoading()
}
return config
})
// 响应拦截器
$.interceptors.response.use((response) => {
if (response.config.showLoading) {
tryHideFullScreenLoading()
}
return response
})
逻辑代码
//计数器
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
startLoading()和endLoading()就是调用 element 的 loading 方法。
import { Loading } from 'element-ui'
let loading
function startLoading() {
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading() {
loading.close()
}