本文介绍在Vue项目中通过Axios拦截器实现请求取消及防止重复提交的方法。针对网络波动或用户误操作导致的多次请求问题，通过生成唯一请求Key并配合CancelToken机制，有效避免资源浪费和数据冲突，提升应用稳定性。
防止重复请求的目的：
旨在避免在网络状况不佳或其他异常场景下，用户短时间内频繁触发同一接口，导致前端向后端发送大量冗余请求。
典型应用场景：
PC端常见于输入框搜索时频繁发起接口调用；移动端因缺乏点击延迟机制，极易发生误触或多点操作引发的重复请求。此外，即使存在Loading遮罩层，若未做特殊处理，仍可能出现重复请求的情况。
创建 axios.js 配置文件：
import axios from "axios";
// import router from "../js/router";
// import { Message } from "element-ui";
/**
* @description 函数返回唯一的请求key **/
function getRequestKey(config) {
let {
method,
url,
params,
data
} = config;
// axios中取消请求及阻止重复请求的方法
// 参数相同时阻止重复请求：
// return [method, url, JSON.stringify(params), JSON.stringify(data)].join("&");
// 请求方法相同，参数不同时阻止重复请求
return [method, url].join("&");
}
/**
* @description 添加请求信息 **/
let pendingRequest = new Map();
function addPendingRequest(config) {
// console.log(config.url)
let requestKey = getRequestKey(config);
config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
if (!pendingRequest.has(requestKey)) {
pendingRequest.set(requestKey, cancel);
}
});
}
/**
* @description 取消重复请求 **/
function removePendingRequest(config) {
let requestKey = getRequestKey(config);
if (pendingRequest.has(requestKey)) {
// 如果是重复的请求，则执行对应的cancel函数
let cancel = pendingRequest.get(requestKey);
cancel(requestKey);
// 将前一次重复的请求移除
pendingRequest.delete(requestKey);
}
}
/**
* @description 请求拦截器 **/
axios.interceptors.request.use(
function (config) {
// 检查是否存在重复请求，若存在则取消已发的请求
removePendingRequest(config);
// 把当前请求信息添加到pendingRequest对象中
addPendingRequest(config);
return config;
},
function (error) {
return Promise.reject(error);
}
);
/**
* @description 响应拦截器 **/
axios.interceptors.response.use(
function (response) {
// 对响应数据做点什么
removePendingRequest(response.config);
// 该方法是项目中用到
// if (response.data.message == "您没有获得授权") {
// Message({
// type: "warning",
// message: "您没有获得授权,请重新登录",
// });
// localStorage.removeItem('token');
// localStorage.removeItem('data');
// router.push({
// name: "login",
// });
// }
return response;
},
function (error) {
// 从pendingRequest对象中移除请求
removePendingRequest(error.config || {});
if (axios.isCancel(error)) {
console.log("被取消的重复请求：" + error.message);
}
return Promise.reject(error);
}
);
export default axios
在项目的全局入口文件 main.js 中引入该配置：
import Vue from "vue";
import axios from "./until/axios";
Vue.prototype.$axios = axios;
至此，关于Vue中Axios取消请求及阻止重复请求的方法介绍完毕。如需了解更多相关内容，可搜索本站往期文章或继续浏览后续教程，感谢您的支持！