前后端防重复提交(续)

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

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

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

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

这种情况下,使用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"); 
		});
	})();
相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript