本篇文章主要介紹了用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中文網其他相關文章!