前后端防重复提交(续)

前文介绍过前后端防重复提交的基本场景,简单的情况是只发起一个异步请求,如果有多个异步请求怎么操作呢?这个要分情况看下。

如果是后端服务器的接口支持一次传递多个申请,那么可以将任务放进数组中,发往后端。这是最好的方式,如果后端现在还不支持,最好说服改进下。

如果就是不支持的话,那么在前端做成并发异步任务,等待所有任务解禁再次提交按钮。

如果批量任务是发给不同的后端服务器处理,那么也是要在前端做成并发异步任务处理的。

这种情况下,使用Promise.allSettled是最好的方式了。

javascript 复制代码
function exectask(target){
	return new Promise((resolve,reject)=>{
		axios.post(url,{"target":target}).then(res => { 
			if (res.data.code!="200") reject(res.data.code)
			else resolve()
			}).catch(errp => reject(errp)) 
		});
}

Promise.allSettled(tasklist.map(item => exectask(item))).then((ret)=>{
	//console.log(ret) 
	$("#tasksubmit").attr("disabled",false);
	if (document.getElementById("taskul").getElementsByTagName("li").length==0) $("#taskseldiv").css("display","none"); 
	});

如果后端任务执行时间短,那么可以这样用,时间长的话,就不好这么用异步调用后.then里等结果出来执行后面的操作,而是直接执行,不用.then操作,不过要用定时器来定时查询后端处理状态。可以参考前面的文章《后台耗时任务的前后端协同方法》

如果后端限制单用户并发连接数的话或者就是想在前端限一下并发任务数的话,可以参考以下代码:

javascript 复制代码
(async () => {
	let ret = [];
	let executing = [];
	let tasksum=dealpool.length;
	for (let i=0;i<tasksum;i++) {
		let p = Promise.resolve().then(() => excetask(dealpool[i]));
		ret.push(p);
		if ( poolLimit<= tasksum) {
			let e = p.then(() => executing.splice(executing.indexOf(e), 1));
			executing.push(e);
			if (executing.length >= poolLimit) { await Promise.race(executing); }
			}
		}
	await Promise.allSettled(ret).then((res)=>{	
		//console.log(res) 
		$("#tasksubmit").attr("disabled",false);
		if (document.getElementById("taskul").getElementsByTagName("li").length==0) $("#taskseldiv").css("display","none"); 
		});
	})();
相关推荐
CoderLiu13 分钟前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说15 分钟前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6661 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey1 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆1 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W1 小时前
uniapp全局状态管理实现方案
前端
Vertira1 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL2 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen2 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui