vue2-http拦截器-实现每次请求地址都显示loading

实现效果图

1、这里使用的是 element-ui 框架显示的 loading，当然使用方法大同小异您可以使用其他框架或者自己写样式。

main.js
引入 element-ui 框架

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

2、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    —    —