本篇文章主要介紹了用Axios Element實現全域的請求loading的方法，現在分享給大家，也給大家做個參考。
背景
業務需求是這樣子的，每當發送請求到後端時就觸發一個全螢幕的 loading，多個請求合併為一次 loading。
現在專案中用的是 vue 、axios、element等，所以文章主要是說如果使用 axios 和 element 來實現這個功能。
效果如下：
分析
首先，請求開始的時候開始loading， 然後在請求返回後結束loading。重點就是要攔截請求和回應。
然後，要解決多個請求合併為一次 loading。
最後，呼叫element 的 loading 元件即可。
攔截請求和回應
axios 的基本使用方法不贅述。筆者在專案中使用 axios 是以建立實例的方式。
// 创建axios实例
const $ = axios.create({
baseURL: `${URL_PREFIX}`,
timeout: 15000
})然後再封裝post 請求（以post 為例）
export default {
post: (url, data, config = { showLoading: true }) => $.post(url, data, config)
}// 请求拦截器
$.interceptors.request.use((config) => {
showFullScreenLoading()
return config
}, (error) => {
return Promise.reject(error)
})
// 响应拦截器
$.interceptors.response.use((response) => {
tryHideFullScreenLoading()
return response
}, (error) => {
return Promise.reject(error)
})let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}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()
}功能增強
實際上，現在的功能還差一點。如果某個請求不需要 loading 呢，那麼發送請求的時候加個 showLoading： false的參數就好了。在請求攔截和回應攔截時判斷下該請求是否需要loading，需要 loading 再去呼叫showFullScreenLoading()方法即可。 在封裝 post 請求時，已經在第三個參數加了 config 物件。 config 包含了 showloading。然後在攔截器中分別處理。// 请求拦截器
$.interceptors.request.use((config) => {
if (config.showLoading) {
showFullScreenLoading()
}
return config
})
// 响应拦截器
$.interceptors.response.use((response) => {
if (response.config.showLoading) {
tryHideFullScreenLoading()
}
return response
})############################ #######
以上是用Axios Element實作全域的請求loading的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
