axios异步请求二次封装，发起请求添加loading及拦截重复请求

1. loading方法

// 显示隐藏loading
import Vue from 'vue';

let needLoadingRequestArr = []; // 声明一个数组用于存储请加载区域求个数对象,如：{name:'container',val::1}

// 存储数据查找loading对象
function findLoadingIndex(target) {
  const index = needLoadingRequestArr.findIndex(el => {
    return el.name == target;
  });
  return index;
}

// 开启loading
function startLoading(target) {
  if (!target && !document.querySelector(target)) return;
  // 判断是按钮还是区域，对象为按钮
  let loading = null;
  if (typeof target == 'string') {
    loading = Vue.prototype.$loading({
      lock: true,
      text: '努力加载中...',
      background: 'rgba(255,255,255,.4)',
      target: document.querySelector(target) // 设置加载动画区域
    });
  } else {
    target.loading = true;
    loading = target;
  }
  return loading; // loading框设置局部loading框
}

// 关闭loading
function endLoading(loading) {
  if (loading.target) {
    loading.close();
  } else {
    loading.loading = false;
  }
}

// 显示loading
export function showLoading(target) {
  if (!target) return;
  // 查找target是否存在，若存在则++，不在设置loading
  const index = findLoadingIndex(target);
  if (index !== -1) { // 已存在
    needLoadingRequestArr[index].value++;
  } else {
    needLoadingRequestArr.push({
      name: target,
      value: 1,
      loading: startLoading(target)
    });
  }
}

// 关闭loading
export function hideLoading(target) {
  if (!target) return;
  const index = findLoadingIndex(target);
  needLoadingRequestArr[index].value--;
  if (needLoadingRequestArr[index].value <= 0) {
    endLoading(needLoadingRequestArr[index].loading); // 关闭loading
    // 移除对象
    needLoadingRequestArr.splice(index, 1);
  }
}

export default {
  showLoading,
  hideLoading
}

2. 请求接口

// 接口请求
import { Message } from 'element-ui';
import { showLoading, hideLoading } from './requestLoading.js';

let pendingMap = [];

// 删除pending
function pendingDelete(key) {
  setTimeout(() => {
    delete(pendingMap[key]);
  }, 500);
}
/*
 === 接口请求 ===
 @params options.name 请求axios
 @params options.data 请求参数
 @params options.target 请求loading容器class/Id名称
 @params options.success 请求成功回调
 @params options.fail 请求失败回调
*/

export function request(options) {
  return new Promise((resolve, reject) => {
    if (!options.name) {
      Message({
        type: 'error',
        message: '找不到' + options.name
      });
      // Message.error('找不到' + options.name);
      reject('找不到' + options.name);
    }
    // url和data做种子生成key
    const key = btoa(encodeURIComponent(options.name.toString()) + encodeURIComponent(JSON.stringify(options
      .data)));
    // 已存在相同请求,加监听，并阻止继续执行
    if (pendingMap[key]) {
      return reject(false);
    }
    pendingMap[key] = true;
    showLoading(options.target);

    options
      .name(options.data)
      .then((res) => {
        // 成功  === 0
        if (res.data.code === 0) {
          // 默认请求成功后设置loadding为false
          options.success && options.success(res.data.data);
          resolve(res.data.data);
        } else {
          options.fail && options.fail(res);
          Message({
            type: 'error',
            message: error
          });
          reject(res);
        }
        hideLoading(options.target);
        pendingDelete(key);
      }).catch(function(res) {
        const error = res.data ? res.data.msg || res.data.error : res.message;
        options.fail && options.fail(res);
        Message({
          type: 'error',
          message: error
        });
        hideLoading(options.target);
        pendingDelete(key);
        reject(res);
      });
  })
}