前端基于 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.value

  if (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