axios拦截器的应用----数据返回之前loading加载

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