Package axios, prend en charge l'annulation des demandes répétées

Package axios, prend en charge l'annulation des demandes répétées

import axios from 'axios';

// axios 实例
const axiosInstance = axios.create({
    
    
  // 配置 axios 实例
});

// 存放正在进行的请求
const pendingRequests = new Map();

// 取消重复请求
const cancelPendingRequest = (config) => {
    
    
  const requestKey = getRequestKey(config);
  if (pendingRequests.has(requestKey)) {
    
    
    const cancelToken = pendingRequests.get(requestKey);
    cancelToken.cancel('Duplicate request');
    pendingRequests.delete(requestKey);
  }
};

// 添加请求到 pendingRequests 中
const addPendingRequest = (config) => {
    
    
  const requestKey = getRequestKey(config);
  config.cancelToken = new axios.CancelToken((cancel) => {
    
    
    if (!pendingRequests.has(requestKey)) {
    
    
      pendingRequests.set(requestKey, cancel);
    }
  });
};

// 生成请求 key
const getRequestKey = (config) => {
    
    
  const {
    
     method, url, params, data } = config;
  return `${
      
      method}_${
      
      url}_${
      
      JSON.stringify(params)}_${
      
      JSON.stringify(data)}`;
};

// 请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    
    
    cancelPendingRequest(config);
    addPendingRequest(config);
    return config;
  },
  (error) => {
    
    
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    
    
    const requestKey = getRequestKey(response.config);
    pendingRequests.delete(requestKey);
    return response;
  },
  (error) => {
    
    
    if (axios.isCancel(error)) {
    
    
      console.log('Request cancelled:', error.message);
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

Lorsque vous l'utilisez, importez directement le fichier et importez l'instance axios via import axios from 'path', et il peut être utilisé. Ce package déterminera si la requête actuelle est la même que la requête en cours dans l'intercepteur de requêtes. Si c'est la même, annulez la requête précédente et stockez le jeton d'annulation de la requête actuelle dans endingRequests. Dans l'intercepteur de réponse, le jeton d'annulation de la demande est supprimé de endingRequests.

Si vous devez annuler une requête en cours, vous pouvez appeler la méthode axios.cancel(requestKey) dans le cycle de vie du composant, qui annulera la requête correspondante en fonction de la clé demandée. Vous pouvez utiliser une variable pour stocker la clé de requête du composant actuel. Lorsque le composant est détruit, toutes les requêtes sont annulées :

import axios from './axios';

export default {
    
    
  data() {
    
    
    return {
    
    
      requestKey: null, // 当前组件的请求 key
    };
  },
  created() {
    
    
    this.requestData();
  },
  beforeDestroy() {
    
    
    axios.cancel(this.requestKey);
  },
  methods: {
    
    
    async requestData() {
    
    
      const {
    
     data } = await axios.get('/api/data', {
    
     cancelToken: this.$axios.CancelToken });
      // 处理请求数据
    },
  },
};