前后端防重复提交(续)

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

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

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

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

这种情况下,使用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"); 
		});
	})();
相关推荐
独立开阀者_FwtCoder几秒前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者3 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder4 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder4 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806919 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说39 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥41 分钟前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js