vue+axios 按钮连续点击多次导致数据多次提交

最新推荐文章于 2024-02-14 14:03:47 发布

原创最新推荐文章于 2024-02-14 14:03:47 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #axios

VUE 专栏收录该内容

10 篇文章

订阅专栏

博客涉及Vue和Axios相关信息技术内容，但具体内容缺失。Vue是前端开发框架，Axios常用于数据请求。

let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken; //初始化取消请求的构造函数
let removePending = (config, f) => {
	let flagUrl =config.url
	if (pending.indexOf(flagUrl) !== -1) {
		if (f) {
			f('按钮点击太频繁');
			//如果你用了element ui的话
		// ElementUI.Message({
		// 	title: '警告',
		// 	message: '按钮点击太频繁',
		// 	type: 'error'
		// });
		} else {
			pending.splice(pending.indexOf(flagUrl), 1)
		}
	} else {
		if (f) {
			pending.push(flagUrl)
		}
	}
}
axios.interceptors.request.use(
	config => {
		config.cancelToken = new cancelToken((c) => {
			removePending(config, c);
		})；
		return config;
	},
	err => {
		return Promise.reject(err);
	});
axios.interceptors.response.use(
	response => {
		removePending(response.config);
	},
	error => {
		pending = [];//接口报错的时候清空url数组
	});