axios 取消重复请求

一、获取请求key

import { MD5 } from "crypto-js";
getRequestKey(config: InternalAxiosRequestConfig) {const { method, baseURL, data, url, params } = config;return MD5([method, `${baseURL}${url}`, JSON.stringify(params), JSON.stringify(data)].join("&")).toString();},

二、保存新的请求数据

let requestList = new Map()axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {const key = useRequeryStoreInfo.getRequestKey(config);const controller = new AbortController();config.signal = controller.signal;requestList.set(key, controller);return config;},(error) => {return Promise.reject(error);}
);

三、判断是否是重复请求

let requestList = new Map()axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {const key = getRequestKey(config);if (requestList .size != 0 && requestList.has(key)) {console.log("重复请求");}return config;},(error) => {return Promise.reject(error);}
);

四、取消重复请求

   const controller = this.requestList.get(key);if (controller) {controller.abort();requestList.delete(key);}

五、请求完成后移出请求列表

axiosInstance.interceptors.response.use((response: AxiosResponse) => {// 请求完成移除const key = getRequestKey(response.config);requestList.delete(key);return response.data;},(error) => {if (error.config) {// 请求完成移除const key = getRequestKey(error.config);requestList.delete(key);}return Promise.reject(error);}
);

六、完整代码：

• 在store\request.ts中：

import { defineStore } from "pinia";
import type { InternalAxiosRequestConfig } from "axios";
import { MD5 } from "crypto-js";/*** 网络请求* requestList:请求数据*/
interface State {token: string;requestList: Map<string, AbortController>;
}
export const useRequeryStore = defineStore("requery", {persist: {pick: ["token"] // 只持久化token},state: (): State => ({token: "",requestList: new Map()}),getters: {// 获取requestListgetRequestList: (state) => state.requestList,// 获取TokengetToken: (state) => state.token},actions: {// 设置TokensetToken(token: string) {this.token = token;},// 获取请求keygetRequestKey(config: InternalAxiosRequestConfig) {const { method, baseURL, data, url, params } = config;return MD5([method, `${baseURL}${url}`, JSON.stringify(params), JSON.stringify(data)].join("&")).toString();},// 存储请求数据setRequest(key: string, controller: AbortController) {this.requestList.set(key, controller);},// 移出重复请求removeRequest(key: string) {const controller = this.requestList.get(key);if (controller) {controller.abort();this.requestList.delete(key);}}}
});

• 在utils\request.ts中：

import axios from "axios";
import type { InternalAxiosRequestConfig, AxiosResponse, AxiosInstance } from "axios";
import { useRequeryStore } from "@/store/request";
const useRequeryStoreInfo = useRequeryStore();// 创建Axios实例
const axiosInstance: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_BASE_URL,timeout: 60000 // 延时时间：60s
});// 请求拦截器
axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {const key = useRequeryStoreInfo.getRequestKey(config);// 取消之前的请求if (useRequeryStoreInfo.getRequestList.size != 0 && useRequeryStoreInfo.getRequestList.has(key)) {ElMessage.warning("请勿重复操作！");useRequeryStoreInfo.removeRequest(key);}// 开始新的请求const controller = new AbortController();config.signal = controller.signal;useRequeryStoreInfo.setRequest(key, controller);return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
axiosInstance.interceptors.response.use((response: AxiosResponse) => {// 请求完成移除const key = useRequeryStoreInfo.getRequestKey(response.config);useRequeryStoreInfo.getRequestList.delete(key);return response.data;},(error) => {if (error.config) {// 请求完成移除const key = useRequeryStoreInfo.getRequestKey(error.config);useRequeryStoreInfo.getRequestList.delete(key);}return Promise.reject(error);}
);export default axiosInstance;