当前位置: 首页 > news >正文

前端基于 axios 实现批量任务调度管理器 demo

一、背景介绍

这是一个基于 axios 实现的批量任务调度管理器的 demo。它使用了axios、promise 等多种技术和原理来实现批量处理多个异步请求,并确保所有请求都能正确处理并报告其状态。

假设有一个场景:有一个任务列表,有单个任务的处理功能,但是用户提出需要增加批量处理任务的需求,那么如果 20 个任务,30 个任务,我们显然可以集成在一次请求里,无非就是服务器处理的压力变大,时间慢一点,但是如果越来越多的任务,用户要等待很久,后端为支持这些,只能改成异步处理,等待时间就很不可控了。并且在这个过程中,很有可能对正在排队的任务进行其他处理,会发生一些不必要的“错误”。所以提出前端对这些任务“批量处理”,并且对这些任务处理时可以先对任务进行过滤和去重等,统计并发请求的状态并展示,最后实现了一个简单的【批量任务调度管理器 demo】。

这个功能还略显青涩,所以后续又进行了优化和完善,最近有新的想法,借助第三方库,比如使用类似p-limit或 p-queue 的任务队列库来管理批量任务。这些库提供了更高级的功能,如任务调度、重试、延迟执行等,这些待实验。

二、功能介绍

这个 demo 实现了以下功能:

  1. 批量处理:用户可以一次性提交多个任务,这些任务会被批量处理,将请求任务分成固定大小(groupSize)的批次进行处理,以避免同时发送过多请求导致服务器压力过大或浏览器资源耗尽。
  2. 并发控制:通过递归调用 requestFunction 和控制 groupSize,实现了对并发请求数量的控制。在每次请求完成后再启动新的请求,确保同时运行的请求数量保持在合理范围内。(有优化
  3. 过滤和去重:使用 filter 和 findIndex 方法,对 tableData 进行过滤和去重,确保每个任务只被处理一次,也可以自定义其他处理方式。
  4. 状态管理:计数(successCount 和 errorCount)处理结果,使用 ElMessage 和 ElNotification 进行用户提示,反馈批量操作的结果。
  5. 异步操作和错误处理:通过 axios 库发送异步 HTTP 请求,使用 then, catch 和 finally 方法处理请求结果和错误,并在出错时记录错误信息。(有优化

三、功能代码

// 批量处理多个任务
const batchOperation = (title, operationType, axiosConfig, shouldFilterList) => {startLoading() // 可忽略,自定义的加载动画const groupSize = 5 // 分组,每组五个请求let successCount = 0 // 成功的请求let errorCount = 0 // 失败的请求let errorMessages = [] // 请求失败时的错误信息记录// 过滤得到需要发生请求的任务列表const requestTaskList = shouldFilterList? tableData.value.filter((item, index, arr) => arr.findIndex((val) => val.id == item.id) == index): tableData.valueif (requestTaskList.length == 0) {ElMessage.error('没有可操作的任务!')stopLoading()return}// 处理请求后的成功或者失败const handleResponse = (error) => {if (error) {errorCount++errorMessages.push(error)} else {successCount++}if (successCount + errorCount === requestTaskList.length) {stopLoading()const message =errorCount === 0? `${requestTaskList.length} 个任务,全部处理成功。`: `${requestTaskList.length} 个任务,${successCount} 个处理成功,${errorCount} 个处理失败。`ElNotification({title: `${title}结果`,message,type: errorCount === 0 ? 'success' : 'warning'})if (errorCount > 0) {console.error('处理失败的任务:', errorMessages)}}}//发送请求--借助递归const requestFunction = () => {// isUnmount是控制是否卸载当前组件if (isUnmount.value || nowIndex >= requestTaskList.length) {return}const row = requestTaskList[nowIndex++]const params = { ...row } // 自定义传参axios.request({ url: axiosConfig.url, method: axiosConfig.method, params }).then((res) => {if (res.data.code == 200) {handleResponse(null)} else {handleResponse(res.data.message)}}).catch(handleResponse).finally(requestFunction)}let nowIndex = 0for (let i = 0; i < groupSize; i++) {requestFunction()}
}// 批量处理
const batchAll = () => {batchOperation('标题','batch', //处理参数的标识{url: '/batch-task',method: 'get',params: { task_id: '', id: '' }},true // 是否过滤列表)
}// 可忽略
const startLoading = () => {// 显示加载动画或状态containerLoading.value = true
}const stopLoading = () => {// 隐藏加载动画或状态containerLoading.value = false
}// 因为是vue,所以在组件卸载之前,取消所有未完成的请求----可忽略
onBeforeUnmount(() => {isUnmount.value = true
})

以上功能能实现的是上述阐述的功能,也算一个简单的批量任务调度管理器,但是还有很多优化方向:

  1. 错误信息收集和展示:
    当前的错误处理仅记录了错误计数。可以改进为记录详细的错误信息,并在批量操作完成后展示这些错误信息,帮助用户理解哪些任务失败了以及原因(这个看需求)。
  2. 动态并发控制:
    使用动态并发控制,根据当前系统负载或网络状况调整并发请求数量,进一步优化性能和稳定性(这个需要依靠工具库完成)。
  3. 任务重试机制:
    为失败的请求添加重试机制,例如在某个请求失败后,可以重试一定次数,以提高成功率(这个看需求)。
  4. Promise.all 优化:
    使用 Promise.all 处理每一批次的请求,而不是递归调用 requestFunction,可以使代码更简洁,并减少递归带来的栈深度问题(这个现在就可以优化)。

四、功能优化

现在做的是基于 promise.all 的优化。我们要知道,promise 本来就是 JS 有的一个 API,那么当时我为何不考虑它呢,还是我当时没有考虑到。
Axios 是基于 Ajax 和 Promise 封装,本来就可以利用 Promise 来更好的管控请求回调嵌套造成的回调地狱,如果不加控制,查了一下,那种递归确实可能会造成调用栈过深,出现栈溢出问题(我还没有遇到过,不知道这种情况是什么样的)。

优化前后比较

通过递归调用 requestFunction 来处理任务,这种方式虽然有效,但有以下几个缺点:

1. 递归深度问题:对于大量任务,递归调用可能导致调用栈过深,出现栈溢出问题。
2. 复杂性和可维护性:递归调用使代码较为复杂,逻辑不直观,不容易维护。
3. 难以控制并发:递归调用在控制并发请求数量上不够灵活。

优化后的方式使用了 Promise.all,通过批量处理的方式来提高代码的可读性和可靠性:

1. 避免递归:使用 Promise.all 处理每个批次的请求,避免了递归调用导致的栈深度问题。
2. 简化代码:优化后的代码结构更加清晰,逻辑更加直观,便于维护。
3. 控制并发:批量处理的方式更加灵活,可以方便地控制并发请求的数量。
4. 更好的错误处理:单独处理每个请求的错误,不会因为一个请求失败而导致整个批次停止

优化代码

// 批量处理
const batchOperation = (title, operationType, axiosConfig, shouldFilterList, tabs) => {startLoading()const groupSize = 5let successCount = 0let errorCount = 0let errorMessages = []const requestTaskList = shouldFilterList? tableData.value.filter((item, index, arr) => arr.findIndex((val) => val.id == item.id) == index): tableData.valueif (requestTaskList.length === 0) {ElMessage.error('没有可操作的任务!')stopLoading(tabs)return}const handleResponse = () => {if (successCount + errorCount === requestTaskList.length) {stopLoading(tabs)const message =errorCount === 0? `${requestTaskList.length} 个任务,全部处理成功。`: `${requestTaskList.length} 个任务,${successCount} 个处理成功,${errorCount} 个处理失败。`ElNotification({title: `${title}结果`,message,type: errorCount === 0 ? 'success' : 'warning'})if (errorCount > 0) {console.error('处理失败的任务:', errorMessages)}}}const makeRequest = (row) => {let params = {}return axios.request({ url: axiosConfig.url, method: axiosConfig.method, params }).then((res) => {if (res.data.code === 200) {successCount++} else {errorCount++errorMessages.push(res.data.message)}}).catch((error) => {errorCount++errorMessages.push(error.message || error)})}const executeBatch = (batch) => {return Promise.all(batch.map(makeRequest)).catch(() => {}) // 忽略批次中的错误,单独处理}let nowIndex = 0const batches = []while (nowIndex < requestTaskList.length) {const batch = requestTaskList.slice(nowIndex, nowIndex + groupSize)batches.push(executeBatch(batch))nowIndex += groupSize}Promise.all(batches).finally(handleResponse)
}

五、总结

两者其实都是并发处理一组又一组的请求,从性能上,我选择 20 个任务,实现的效果,优化后和优化前:
在这里插入图片描述

可以看得出,其实两者没有什么区别,可能因为我的实验数量太少,但是我查阅了资料,得出使用 Promise.all 的优点:

代码简洁:Promise.all 的实现方式较为简单,代码可读性强。
无栈深度问题:Promise.all 没有递归调用的问题,不会导致栈溢出。
就以上两点,也算是有了一点点效果吧。

最后,想试试另一种工具库来实现这个功能,就是借助上面提到的库,未完~

欢迎查看: 下篇

相关文章:

前端基于 axios 实现批量任务调度管理器 demo

一、背景介绍 这是一个基于 axios 实现的批量任务调度管理器的 demo。它使用了axios、promise 等多种技术和原理来实现批量处理多个异步请求&#xff0c;并确保所有请求都能正确处理并报告其状态。 假设有一个场景&#xff1a;有一个任务列表&#xff0c;有单个任务的处理功能…...

Docker容器下面home assistant忘记账号密码怎么重置?

环境&#xff1a; docker ha 问题描述&#xff1a; Docker容器下面home assistant忘记账号密码怎么重置&#xff1f; 解决方案&#xff1a; 你可以按照以下步骤来找回或重置密码&#xff1a; 方法一 (未解决) 停止并删除当前的Home Assistant容器&#xff08;确保你已经保…...

CTF-NSSCTF[GKCTF 2021]

[GKCTF 2021]easycms 考察&#xff1a; 用扫描工具扫描目录&#xff0c;扫描到后台登录界面/admin.php 题目提示了密码是五位弱口令&#xff0c;试了试弱口令admin和12345直接成功了 任意文件下载 点击设计-->主题然后随便选择一个主题&#xff0c;点击自定义&#xff0…...

MSA+抑郁症模型总结(一)(论文复现)

MSA抑郁症模型总结&#xff08;一&#xff09;&#xff08;论文复现&#xff09; 本文所涉及所有资源均在传知代码平台可获取 文章目录 MSA抑郁症模型总结&#xff08;一&#xff09;&#xff08;论文复现&#xff09;情感分析在多场景的应用一、概述二、论文地址三、研究背景四…...

STM32智能农业灌溉系统教程

目录 引言环境准备智能农业灌溉系统基础代码实现&#xff1a;实现智能农业灌溉系统 4.1 数据采集模块 4.2 数据处理与分析模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;农业监测与优化问题解决方案与优化收尾与总结 1. 引言 智能农业灌溉系统通…...

MySQL存储引擎和

MySQL存储引擎 在数据库中保存的是一张张有着千丝万缕关系的表&#xff0c;所以表设计的好坏&#xff0c;将直接影响着整个数据库。而在设计表的时候&#xff0c;最关注的一个问题是使用什么存储引擎。MySQL中的数据用各种不同的技术存储在文件(或者内存)中。这些技术中的每一种…...

Eclipse 主网向开发者开放

摘要&#xff1a;Eclipse 基金会宣布&#xff0c;Eclipse 主网已经向开发者开放。在接下来几周的时间里&#xff0c;Eclipse 将邀请开发者在主网上部署项目&#xff0c;并参加黑客马拉松活动——“Total Eclipse Challenge”。 Eclipse 是首个基于以太坊的 SVM Layer2 方案&am…...

国内NAT服务器docker方式搭建rustdesk服务

前言 如果遇到10054,就不要设置id服务器!!! 由于遇到大带宽,但是又贵,所以就NAT的啦,但是只有ipv4共享和一个ipv6,带宽50MB(活动免费会升130MB~) https://bigchick.xyz/aff.php?aff322 月付-5 循环 &#xff1a;CM-CQ-Monthly-5 年付-60循环&#xff1a;CM-CQ-Annually-60官方…...

锅总浅析链路追踪技术

链路追踪是什么&#xff1f;常用的链路追踪工具有哪些&#xff1f;它们的异同、架构、工作流程及关键指标有哪些&#xff1f;希望读完本文能帮您解答这些疑惑&#xff01; 一、链路追踪简介 链路追踪技术&#xff08;Distributed Tracing&#xff09;是一种用于监控和分析分布…...

为什么阿里开发手册不建议使用Date类?

在日常编码中&#xff0c;基本上99%的项目都会有一个DateUtil工具类&#xff0c;而时间工具类里用的最多的就是java.util.Date。 大家都这么写&#xff0c;这还能有问题&#xff1f;&#xff1f; 当你的“默认常识”出现问题&#xff0c;这个打击&#xff0c;就是毁灭性的。 …...

中间层 k8s(Kubernetes) 到底是什么,架构是怎么样的?

你是一个程序员&#xff0c;你用代码写了一个博客应用服务&#xff0c;并将它部署在了云平台上。 但应用服务太过受欢迎&#xff0c;访问量太大&#xff0c;经常会挂。 所以你用了一些工具自动重启挂掉的应用服务&#xff0c;并且将应用服务部署在了好几个服务器上&#xff0c;…...

【CTFWP】ctfshow-web40

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 题目介绍&#xff1a;题目分析&#xff1a;payload&#xff1a;payload解释&#xff1a;payload2&#xff1a;payload2解释&#xff1a;flag 题目介绍&#xff1a; …...

项目实战1(30小时精通C++和外挂实战)

项目实战1&#xff08;30小时精通C和外挂实战&#xff09; 01-MFC1-图标02-MFC2-按钮、调试、打开网页05-MFC5-checkbox及按钮绑定对象06--文件格式、OD序列号08-暴力破解09-CE10-秒杀僵尸 01-MFC1-图标 这个外挂只针对植物大战僵尸游戏 开发这个外挂&#xff0c;首先要将界面…...

百日筑基第三十六天

今日论道还算顺利&#xff0c;只可惜感到也没学到什么东西。晚些时候师祖问话&#xff0c;主要是来这边之后有什么困难之类&#xff0c;好像也没遇到需要他来帮我解决的困难&#xff0c;于是问了些修炼方法之类。...

MySQL: ALTER

正文 在数据库管理系统&#xff08;DBMS&#xff09;中&#xff0c;DDL&#xff08;Data Definition Language&#xff09;、DCL&#xff08;Data Control Language&#xff09;、和 DML&#xff08;Data Manipulation Language&#xff09;是三种主要的SQL&#xff08;Struct…...

微前端技术预研 - bit初体验

1.关于什么是微前端以及微前端的发展&#xff0c; 当前主流框架以及实现技术等&#xff0c;可参考这篇总结(非常全面)&#xff0c; 微前端总结&#xff1a;目录详见下图 本文内容主要针对bit框架的实时思路以及具体使用。 1.什么是Bit? &#xfeff;Bit 是可组合软件的构建…...

对象关系映射---ORM

一、什么是ORM&#xff1f; ORM&#xff08;Object Relational Mapping&#xff09;&#xff0c;即对象关系映射&#xff0c;是一种程序设计技术&#xff0c;用于在面向对象编程语言中实现对象和关系型数据库之间的映射。 二、ORM是干什么的&#xff1f; ORM 的主要目的是简…...

Django REST Framework(十七)Authentication

1.认证Authentication 在 Django REST framework (DRF) 中&#xff0c;可以在配置文件中配置全局默认的认证方案。常见的认证方式包括 cookie、session、和 token。DRF 提供了灵活的认证机制&#xff0c;可以在全局配置文件中设置默认认证方式&#xff0c;也可以在具体的视图类…...

FPGA开发——数码管的使用

一、概述 在我们的日常开发中&#xff0c;数字显示的领域中用得最多的就是数码管&#xff0c;这篇文章也是围绕数码管的静态显示和动态显示进行一个讲解。 1、理论 &#xff08;1&#xff09;数码管原理图 在对数码管进行相关控制时&#xff0c;其实就是对于8段发光二极管和…...

什么是网络安全等级保护测评服务?

等保测评 依据国家网络安全等级保护制度规定&#xff0c;按照有关管理规范和技术标准&#xff0c;对非涉及国家秘密的网络安全等级保护状况进行检测评估。定级协助 根据等级保护对象在国家安全、经济建设、社会生活中的重要程度&#xff0c;以及一旦遭到破坏、丧失功能或者数据…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...