vue解决Tab切换频率过快，页面请求接口数据显示错乱问题，在axios中封装取消阻止重复请求（防抖请求）

// src/utils/request.js
import axios from 'axios';

// 用于存储每个请求的标识
let pendingRequests = new Map();

/**
 * 生成请求的唯一标识
 * @param {Object} config
 * @returns {string}
 */
const generateRequestKey = (config) => {
  const { method, url, params, data } = config;
  return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&');
};

/**
 * 添加请求到 pendingRequests
 * @param {Object} config
 */
const addPendingRequest = (config) => {
  const requestKey = generateRequestKey(config);

  // 如果请求存在，则取消重复请求
  config.cancelToken = new axios.CancelToken((cancel) => {
    if (!pendingRequests.has(requestKey)) {
      pendingRequests.set(requestKey, cancel);
    }
  });
};

/**
 * 移除已完成的请求
 * @param {Object} config
 */
const removePendingRequest = (config) => {
  const requestKey = generateRequestKey(config);
  if (pendingRequests.has(requestKey)) {
    const cancel = pendingRequests.get(requestKey);
    cancel(requestKey);
    pendingRequests.delete(requestKey);
  }
};

// 创建 axios 实例
const service = axios.create({
  baseURL: '/api', // 设置基础URL，根据你的需求配置
  timeout: 5000,   // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    removePendingRequest(config); // 移除重复的请求
    addPendingRequest(config);    // 添加新请求
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    removePendingRequest(response.config); // 请求成功，移除记录
    return response;
  },
  (error) => {
    removePendingRequest(error.config || {}); // 请求失败，也需要移除
    return Promise.reject(error);
  }
);

export default service;