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