axios是一个基于Promise的HTTP库，返回值是Promise对象。
前端通过axios向后端请求数据，我们可以通过axios拦截器在请求或响应被then或catch之前拦截它们。
关于axios拦截器的基本知识：

// 请求拦截器
let axios_inter = axios.interceptors.request.use((request) => {
    //请求发送之前对request做任何操作，比如设置请求头等
    let { method, data, params } = request;
    if(request.method === 'get') {
      
    } else {
    }
    return config
}, (error) => {
    //请求错误时执行操作
    return Promise.reject(error)
})
axios.interceptors.request.eject(axios_inter) //移除请求拦截器


// 响应拦截器
let axios_inter = axios.interceptors.response.use((response) => {
    //可以根据响应状态码来做相关操作
    let {config, data} = response;
    if(config.method === 'get') {
    }
    return response
}, (error) => {
    return Promise.reject(error)
})
axios.interceptors.response.eject(axios_inter) //移除拦截器

下面就开始实现：使用axios拦截器在数据返回之前实现loading加载效果：这里采用的loading组件是element-ui组件库的loading组件，所以需要在项目中安装element-ui（npm install element-ui --save）

1、项目文件结构：

2、index.js文件

import axios from 'axios'
import qs from 'qs'
import Vue from 'vue'

const vm = new Vue()

let loading // loading

const http = axios.create({
  // 请求超时时间
  timeout: 15000,

  // 用于请求之前对数据进行操作，只用于请求方法为post,put,patch,需要return相应的数据
  transformRequest: [function(data) {
    return data;
  }],

  // get请求，序列化参数，只有在有参数的时候会执行
  paramsSerializer: function(params) {
    return qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // 允许携带cookie
  withCredentials: true
});

/**
 * 请求拦截器
 */
http.interceptors.request.use((config) => {
  console.log('config', config)
  startLoading()
  return config
}, (error) => {
  return Promise.reject(error)
});

/**
 * 响应拦截器
 */
http.interceptors.response.use((response) => {
  console.log('response', response)
  let {status} = response
  if (status == 200) {
    endLoading()
  }
  return response
}, (error) => {
  return Promise.reject(error)
});

function startLoading() {
  let options = {
    lock: true,
    fullScreen: true,
    text: '正在加载中......',
    background: 'rgba(0, 0, 0, .4)'
  }
  loading = vm.$loading(options)
}

function endLoading() {
  loading && loading.close()
}


export {http}

3、index.vue

<template>
  <div>
    <el-button type="primary" @click="request">请求</el-button>
  </div>
</template>
<script>
import {http} from './index.js'
import axios from 'axios'
export default {
  data() {
    return {
    }
  },
  methods: {
    request() {

      // 创建一个404的地址，一直不会返回200，就会一直加载loading效果
      let url = '/static/test1.json'
      let res = http.get(url).then((res) => {
        console.log('res--', res)
      }).catch((error) => {
        console.log('error', error)
      })
      console.log('res----', res)

      // 请求正常的地址
      setTimeout(() => {
        http.get('/static/test.json').then((res) => {
          console.log('res--', res)
        }).catch((error) => {
          console.log('error', error)
        })
      }, 3000)
    }
  },
  mounted() {

  }
}
</script>
<style lang="less">

</style>