前后端防重复提交(续)

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

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

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

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

这种情况下，使用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"); 
		});
	})();