vue2 http攔截器 實現每次請求地址都顯示loading

實現效果圖

一、這裏使用的是element-ui框架顯示的loading，固然使用方法大同小異您能夠使用其餘框架或者本身寫樣式。

main.js
引入element-ui框架

import ElementUI from 'element-ui'
Vue.use(ElementUI)

二、main.js中配置攔截器

// 開始攔截
Vue.http.interceptors.push((request, next) => {
  if (request.url.length > 0) { // 判斷請求地址
    let loadingInstance = ElementUI.Loading.service({ target: document.getElementById('loading'), fullscreen: false, text: '玩命加載中...' })
    next((response) => {
      // 請求完成，關閉loading框
      // this.$nextTick(() => { // 以服務的方式調用的 Loading 須要異步關閉
      loadingInstance.close()
      // })
      return response
    })
  }
})

配置參數

target    Loading 須要覆蓋的 DOM 節點。可傳入一個 DOM 對象或字符串；若傳入字符串，則會將其做爲參數傳入 document.querySelector以獲取到對應 DOM 節點    object/string    —    document.body
body    同 v-loading 指令中的 body 修飾符    boolean    —    false
fullscreen    同 v-loading 指令中的 fullscreen 修飾符    boolean    —    true
lock    同 v-loading 指令中的 lock 修飾符    boolean    —    false
text    顯示在加載圖標下方的加載文案    string    —    —
spinner    自定義加載圖標類名    string    —    —
background    遮罩背景色    string    —    —
customClass    Loading 的自定義類名    string    —    —