开箱即用的axios Api请求封装 拦截重复请求，并将请求结果共享给所有请求的地方。支持get/post等多种请求方式，支持文件上传，支持自定义headers

之前做项目的时候经常遇到个问题：相同url相同参数的接口，短时间内重复请求调用。

产生的原因有多种：

按钮未做防抖/节流/锁,高频点击（实际上项目中所有按钮都加上防抖/节流/锁处理是不现实的）；

相同信息同页面的异构展示，每个地方独立获取数据（不够优雅的架构等）；

代码没优化好，但是历史代码逻辑复杂，不敢重构......

最开始想要做的优化方案是：对每一个请求做记录（通过url和param），请求发起前检测是否存在已发出的接口，如果有则打断。但是有一个问题，被打断的接口没有返回，不符合一些特殊的业务场景。

于是在原有的axios封装上不断优化，历时两天，终于撸出最终版：

目录结构如图。

首先封装工具函数：requestMeans.js

import qs from 'qs'; //参数编译
import { getToken } from '@/storage';

let pending = []; //用于存储每个ajax请求的取消函数和ajax标识
let task = {}; //用于存储每个ajax请求的处理函数，通过请求结果调用，以ajax标识为key

//请求开始前推入pending
export const pushPending = (item) => {
  pending.push(item);
};
//请求完成后取消该请求，从列表删除
export const removePending = (e) => {
  let key = e.baseURL + '?' + (e.method == 'post' ? e.data : qs.stringify(e.params));
  for (let p in pending) {
    if (pending[p].key === key) {
      //当前请求在列表中存在时
      pending[p].cancelToken(); //执行取消操作
      pending.splice(p, 1); //把这条记录从列表中移除
    }
  }
};

// 创建task
export const createTask = (key, resolve) => {
  let callback = (response) => {
    if (response.data.status === -1) {
      // 这里处理授权逻辑
    } else if (response.data.status) {
      // 这里做全局错误提示
    }
    resolve(response.data);
  };
  if (!task[key]) task[key] = [];
  task[key].push(callback);
};
// 处理task
export const handleTask = (key, response) => {
  for (let i = 0; task[key] && i < task[key].length; i++) {
    task[key][i](response);
  }
  task[key] = undefined;
};

// data处理：存在token则加入
export const dataAddToken = (data) => {
  const token = getToken();
  if (token) {
    data['token'] = token;
  }
  return data;
};

请求封装：request.js

import qs from 'qs'; //参数编译
import axios from 'axios';

import { pushPending, removePending, createTask, handleTask, dataAddToken } from './requestMeans';

const getHeaders = { 'Content-Type': 'application/json' } ;
const postHeaders = { 'Content-Type': 'application/x-www-form-urlencoded' } ;
const fileHeaders = { 'Content-Type': 'multipart/form-data' } ;

const baseURL = 'https://mock.apipost.cn/app/mock/project/f0a1c097-861b-473f-b0d4-a706fbe0af91';

//请求封装
export const request = (method, url, params, headers, preventRepeat = true, uploadFile = false) => {
  let key = baseURL + url + '?' + qs.stringify(params);
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: baseURL + url,
      headers,
      timeout: 30 * 1000,
    });

    instance.interceptors.request.use(
      (config) => {
        if (preventRepeat) {
          removePending(config); //防止多次触发请求
          config.cancelToken = new axios.CancelToken((cancelToken) => {
            pushPending({ key, cancelToken });
          });
        }
        return config;
      },
      (err) => {
        return Promise.reject(err);
      }
    );

    instance.interceptors.response.use(
      (response) => {
        if (preventRepeat) {
          removePending(response.config);
        }
        return response;
      },
      (error) => {
        return Promise.reject(error);
      }
    );

    // 请求执行前加入task
    createTask(key, resolve);

    instance(Object.assign({}, { method }, method === 'post' || method === 'put' ? { data: !uploadFile ? qs.stringify(params) : params } : { params }))
      .then((response) => {
        // 处理task
        handleTask(key, response);
      })
      .catch();
  });
};

// 定义对外Get、Post请求
export default {
  // 单独导出 用于put等非常规请求及需要特殊处理header的请求
  request,
  get(url, data = {}, preventRepeat = true) {
    data = dataAddToken(data);
    return request('get', url, data, getHeaders, preventRepeat, false);
  },
  post(url, data = {}, preventRepeat = true) {
    data = dataAddToken(data);
    return request('post', url, data, postHeaders, preventRepeat, false);
  },
  file(url, data = {}, preventRepeat = true) {
    return request('post', url, data, fileHeaders, preventRepeat, true);
  },
};

api封装：index.js

import Request from './request';

// 公用-获取验证码
export const postMerchantLoginCms = (data) => Request.post('/merchant/login/cms', data);

// 临时mock接口，用于测试封装功能
// export const getList = (data) => Request.get('/web-model-library/merchant/investigation', data);
export const getList = (data) => Request.post('/active/getRandModel', data);

使用方式：

import { getList } from "@/api";


 methods: {
     async getdata() {
      let data =await getList({a:1});
    },
}