Vue - 封装Axios实现全局的loading自动显示效果（结合Element UI）

1. 组件封装

(1)在项目中创建一个 axios.js，里面内容是对 Axios 进行二次封装，代码如下：

• 基本原理是通过 axios 提供的请求拦截和响应拦截的接口，控制 loading 的显示或者隐藏。同时在请求失败时还会自动弹出消息提示框显示错误信息。
• loding 效果这里采用的是 Element UI 中提供的 Loading 组件来实现。而错误消息提示框则用的是 Element UI 中的 Message 组件来实现。
• 内部有个计数器，确保同一时刻如果有多个请求的话，不会同时出现多个 loading，而是只有 1 个。并且在所有请求结束后才会隐藏 loading。
• 使用了 lodash 的 debounce 防抖。因为有时会碰到在一次请求完毕后又立刻又发起一个新的请求的情况（比如删除一个表格条目后立刻进行刷新）。这种情况会造成连续 loading 两次，并且中间有一次极短的闪烁。通过防抖可以让 300ms 间隔内的 loading 便合并为一次，避免闪烁的情况。
• 默认所有请求都会自动有 loading 效果。如果某个请求不需要 loading 效果，可以在请求 header 中 showLoading 设置为 false。
• 默认的 loading 效果时全屏的（覆盖在 body 上）。如果某个请求是需要在某个指定元素上显示 loading 效果，可以将请求 header 中 loadingTarget 设置为该元素的选择符。

/**
* @description: axios封装 - 请求拦截、相应拦截、错误统一处理
* @param {*}
* @return {*}
*/
import axios from 'axios';
import QS from 'qs';
import {
    Loading, Message } from 'element-ui';
import _ from 'lodash';

// loading对象
let loadingInstance;

// 请求合并只出现一次loading
// 当前正在请求的数量
let loadingRequestCount = 0;

// 请求超时时间
axios.defaults.timeout = 10000;

// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';


// 请求拦截器
axios.interceptors.request.use(
  config => {
   
    let loadingTarget = '.app_content';
    if(config.headers.loadingTarget){
   
      loadingTarget