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

发布时间：2023-07-07 16:08:29 修改时间：2023-07-07 16:08:29 阅读：7670 评论：0 0

在 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:

 

---