前后端防重复提交(续)

前文介绍过前后端防重复提交的基本场景,简单的情况是只发起一个异步请求,如果有多个异步请求怎么操作呢?这个要分情况看下。
如果是后端服务器的接口支持一次传递多个申请,那么可以将任务放进数组中,发往后端。这是最好的方式,如果后端现在还不支持,最好说服改进下。
如果就是不支持的话,那么在前端做成并发异步任务,等待所有任务解禁再次提交按钮。
如果批量任务是发给不同的后端服务器处理,那么也是要在前端做成并发异步任务处理的。
这种情况下,使用Promise.allSettled是最好的方式了。

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操作,不过要用定时器来定时查询后端处理状态。可以参考前面的文章《后台耗时任务的前后端协同方法》
如果后端限制单用户并发连接数的话或者就是想在前端限一下并发任务数的话,可以参考以下代码:

(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"); });})();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/39432.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

074、Python 关于实例方法、静态方法和类方法

在Python中&#xff0c;类可以定义三种类型的方法&#xff1a;实例方法、静态方法和类方法。每种方法都有其特定的用途和调用方式。 实例方法&#xff08;Instance Methods&#xff09; 定义&#xff1a;实例方法是绑定到类实例上的方法。它们必须有一个名为self的隐式第一个参…

golang 1.22特性之for loop

背景 go1.22版本 for loop每轮循环都生成新的变量. 原谅: https://tip.golang.org/doc/go1.22 Previously, the variables declared by a “for” loop were created once and updated by each iteration. In Go 1.22, each iteration of the loop creates new variables, to …

【C++11】自己封装RAII类,有哪些坑点?带你了解移动语义的真相

文章目录 一、持有资源的类定义移动构造函数的要点1.普通内置类型与std::move2.常见的容器与std::move3.结构体&#xff1a;4.智能指针与std::move 参考 一、持有资源的类定义移动构造函数的要点 1.普通内置类型与std::move 在C中&#xff0c;std::move 主要用于对象的移动语…

Wireshark - tshark支持iptables提供数据包

tshark现在的数据包获取方式有两种&#xff0c;分别是读文件、网口监听&#xff08;af-packet原始套接字&#xff09;。两种方式在包获取上&#xff0c;都是通过读文件的形式&#xff1b;存在文件io操作&#xff0c;在专门处理大流量的情境下&#xff0c; 我们复用wireshark去做…

Windows编程上

Windows编程[上] 一、Windows API1.控制台大小设置1.1 GetStdHandle1.2 SetConsoleWindowInfo1.3 SetConsoleScreenBufferSize1.4 SetConsoleTitle1.5 封装为Innks 2.控制台字体设置以及光标调整2.1 GetConsoleCursorInfo2.2 SetConsoleCursorPosition2.3 GetCurrentConsoleFon…

python如何输出list

直接输出list_a中的元素三种方法&#xff1a; list_a [1,2,3,313,1] 第一种 for i in range(len(list_a)):print(list_a[i]) 1 2 3 313 1 第二种 for i in list_a:print(i) 1 2 3 313 1 第三种&#xff0c;使用enumerate输出list_a方法&#xff1a; for i&#xff0c;j in enum…

Redis的使用(二)redis的命令总结

1.概述 这一小节&#xff0c;我们主要来研究一下redis的五大类型的基本使用&#xff0c;数据类型如下&#xff1a; redis我们接下来看一看这八种类型的基本使用。我们可以在redis的官网查询这些命令:Commands | Docs,同时我们也可以用help 数据类型查看命令的帮助文档。 2. 常…

数据结构 - C/C++ - 串

字符处理 C 特性 C语言中字符串存储在字符数组中&#xff0c;以空字符\0结束。 字符串常量&#xff0c;const char* str "Hello"&#xff0c;存储在只读的数据段中。 布局 字符串在内存中是字符连续存储的集合&#xff0c;最后一个字符为空字符(ASCII值为0)&…

opencascade AIS_InteractiveContext源码学习7 debug visualization

AIS_InteractiveContext 前言 交互上下文&#xff08;Interactive Context&#xff09;允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是&#xff0c;对于已经被交互上下文识别的交互对象&#xff0c;必须使用上下文方法进行…

【问题已解决】Vue管理后台,点击登录按钮,会发起两次网络请求(竟然是vscode Compile Hero编译插件导致的)

问题 VueElement UI 做的管理后台&#xff0c;点击登录按钮&#xff0c;发现 接口会连续掉两次&#xff0c;发起两次网络请求&#xff0c;但其他接口都是正常调用的&#xff0c;没有这个问题&#xff0c;并且登录按钮也加了loading&#xff0c;防止重复点击&#xff0c;于是开…

搜索引擎常用语法

引号 (" "): 用双引号将词组括起来&#xff0c;搜索引擎将返回包含完全相同短语的结果。 示例&#xff1a;"人工智能发展趋势" 减号 (-): 在关键词前加上减号可以排除包含特定词语的结果。 示例&#xff1a;人工智能 -机器学习&#xff08;排除包含 “机器…

朴素贝叶斯解密:sklearn中的分类器工作原理

&#x1f4da; 朴素贝叶斯解密&#xff1a;sklearn中的分类器工作原理 在机器学习领域&#xff0c;朴素贝叶斯分类器因其简单、高效而广受欢迎。特别是在处理大量特征数据时&#xff0c;朴素贝叶斯表现出了卓越的性能。scikit-learn&#xff08;简称sklearn&#xff09;是Pyth…

JavaMySQL 学习(基础)

目录 Java CMD Java发展 计算机存储规则 Java学习 switch新用法&#xff08;可以当做if来使用&#xff09; 数组定义 随机数 Java内存分配 MySQL MySQL概述 启动和停止 客户端连接 数据模型 关系型数据库 SQL SQL通用语法 SQL分类 DDL--数据定义语言 数据库…

浏览器开发者工具辅助爬虫开发

文章目录 浏览器开发者工具辅助爬虫开发打开开发者工具使用Network面板分析请求数据示例步骤&#xff1a; 使用Elements面板查看和修改DOM结构示例步骤&#xff1a; 使用Console面板调试JavaScript代码示例步骤&#xff1a;示例代码&#xff1a;1. 输出日志信息2. 输出对象信息…

Vue 与 React 区别

Vue.js和React是现代Web开发中两种非常流行的前端框架&#xff0c;两者在**核心概念、组件以及生态系统扩展性**等方面存在区别。具体分析如下&#xff1a; 1. **核心概念** - **Vue**&#xff1a;Vue是一个渐进式JavaScript框架&#xff0c;它致力于视图层&#xff0c;易于上手…

左值右值, 左值引用右值引用,完美转发

一. 左值和右值 左值: 可以取地址的对象 右值: 不可以取地址的对象 double x1.0, y 2.0; 1; // 字面量, 不可取地址, 是右值 x y; // 表达式返回值, 不可取地址, 是右值 max(x, y); // 传值返回函数的返回值 (非引用返回)总结就是: 根据是否可以取地址来区分是左值还…

线程池666666

1. 作用 线程池内部维护了多个工作线程&#xff0c;每个工作线程都会去任务队列中拿取任务并执行&#xff0c;当执行完一个任务后不是马上销毁&#xff0c;而是继续保留执行其它任务。显然&#xff0c;线程池提高了多线程的复用率&#xff0c;减少了创建和销毁线程的时间。 2…

git修改已提交的commit注释

在Git中修改已经提交的commit注释通常有以下几种情况和相应的方法&#xff1a; 1. 修改最后一次提交的注释&#xff08;快速修正&#xff09; 如果你想要修改的是最后一次提交的注释&#xff0c;可以使用 --amend 选项&#xff1a; git commit --amend这个命令会将你的暂存区…

基于深度学习的光度检测

基于深度学习的光度检测&#xff08;Photometric Detection&#xff09;涉及从图像中检测和分析光照信息&#xff0c;用于多种应用&#xff0c;如场景理解、照明调节、增强现实&#xff08;AR&#xff09;、图像增强等。以下是关于这一领域的系统介绍&#xff1a; 1. 任务和目…

JAVA基础教程DAY1-类与方法及形参实参

首先经过C语言的学习&#xff0c;我们已经学会了基本的编程方法&#xff0c;我们知道C语言是面向过程的编程语言&#xff0c;而JAVA是面向对象的编程语言&#xff0c;所以接下来我们通过对比和举例来进行JAVA语言的学习 首先我们来讲类的概念 类&#xff1a;类是一个模板&…