在 avue中使用axios拦截器中 实现多次请求清除上一个请求数据 防止新的数据被覆盖

在 Avue 中使用 axios 拦截器实现多次请求清除上一个请求数据的功能，可以通过创建一个新的 axios 实例并配置请求和响应拦截器来实现。以下是如何在 Avue 项目中实现此功能：

1、创建一个名为 axiosInstance.js 的文件，并引入 axios：

import axios from 'axios';

2、创建一个新的 axios 实例：

const axiosInstance = axios.create({
  // 可以在这里设置默认配置，如 baseURL, timeout 等
});

3、在 axiosInstance.js 文件中定义一个名为 pendingRequests 的 Map，用于存储正在进行的请求：

const pendingRequests = new Map();

4、创建一个名为 generateRequestKey 的辅助函数，用于根据请求信息生成唯一的请求 key：

function generateRequestKey(config) {
  const { method, url, params, data } = config;
  return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&');
}

5、为 axios 实例配置请求拦截器：

axiosInstance.interceptors.request.use(
  (config) => {
    const requestKey = generateRequestKey(config);
    if (pendingRequests.has(requestKey)) {
      const cancelTokenSource = pendingRequests.get(requestKey);
      cancelTokenSource.cancel('Canceled previous request');
    }

    const source = axios.CancelToken.source();
    config.cancelToken = source.token;
    pendingRequests.set(requestKey, source);

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

在请求拦截器中，我们首先根据请求信息生成一个唯一的请求 key。然后检查此请求是否已经存在于 pendingRequests Map 中。如果存在，则取消之前的请求。最后，我们创建一个新的取消令牌源，并将其与请求 key 一起存储在 pendingRequests Map 中。
6、为 axios 实例配置响应拦截器：

axiosInstance.interceptors.response.use(
  (response) => {
    const requestKey = generateRequestKey(response.config);
    pendingRequests.delete(requestKey);
    return response;
  },
  (error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      // Handle errors here, or throw them to handle in components
      return Promise.reject(error);
    }
  }
);

在响应拦截器中，我们根据响应信息中的请求配置生成请求 key，并从 pendingRequests Map 中删除对应的请求。这样，我们可以确保在请求完成时清理已完成的请求。
7、将 axios 实例导出，以便在其他文件中使用：

export default axiosInstance;

现在，您可以在项目的其他部分使用封装好的 axios 实例来发起请求。以下是如何在 Vue 组件中使用这个 axios 实例：

import axiosInstance from '@/utils/axiosInstance';

export default {
  // ...
  methods: