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.bodybody    同 v-loading 指令中的 body 修饰符    boolean    —    falsefullscreen    同 v-loading 指令中的 fullscreen 修饰符    boolean    —    truelock    同 v-loading 指令中的 lock 修饰符    boolean    —    falsetext    显示在加载图标下方的加载文案    string    —    —spinner    自定义加载图标类名    string    —    —background    遮罩背景色    string    —    —customClass    Loading 的自定义类名    string    —    —