在js中大量接口调用并发批量请求处理器

并发批量请求处理器

✨ 设计目标

该类用于批量异步请求处理,支持:

  • 自定义并发数
  • 请求节拍控制(延时)
  • 失败重试机制
  • 进度回调通知

🔧 构造函数参数

js 复制代码
new BulkRequestHandler({
  dataList,          // 要处理的数据列表
  requestFn,         // 每条数据的处理函数(返回Promise)
  concurrency = 5,   // 并发请求数
  delay = 100,       // 请求间隔时间(ms)
  retry = 3,         // 每条数据最大重试次数
  onProgressUpdate = () => {}  // 进度更新回调函数
})

🔁 核心执行流程

1. start() 启动任务处理

js 复制代码
const workers = Array(this.concurrency).fill(null).map(() => this._worker());
await Promise.all(workers);
return this.results;
  • 启动多个"工人(worker)任务"并行处理数据。

  • 每个 worker 会不断从共享的 this.index 中取任务,直到任务取尽

2. _worker() 单个任务工人执行逻辑

js 复制代码
while (this.index < this.dataList.length) {
  const currentIndex = this.index++;
  const item = this.dataList[currentIndex];

  try {
    const result = await this._requestWithRetry(item, this.retry);
    this.results[currentIndex] = result;
  } catch (err) {
    this.results[currentIndex] = {
      name: item.name,
      address: item.address,
      error: err.message,
      success: false
    };
  }

  this.completed++;
  this.onProgressUpdate(this.completed);
  await new Promise((res) => setTimeout(res, this.delay));
}

流程说明:

  • 从共享索引中取出当前任务项。

  • 调用 _requestWithRetry() 尝试处理该项。

  • 处理完成或失败后记录结果。

  • 更新完成数量,并触发进度回调。

  • 可选的节拍等待,避免请求过快

3. _requestWithRetry() 重试机制处理

js 复制代码
try {
  return await this.requestFn(item);
} catch (err) {
  if (retriesLeft <= 1) throw err;
  await new Promise(res => setTimeout(res, 200 * (this.retry - retriesLeft + 1)));
  return await this._requestWithRetry(item, retriesLeft - 1);
}

说明:

  • 如果请求失败,则根据剩余重试次数,指数退避式延迟后重试。

  • 最多重试 retry 次,失败则抛出错误交由上层处理

小结:执行顺序图

plaintext 复制代码
start()
 ├─ 创建多个 worker 并发执行
 ├─ 每个 worker 循环取任务
 │   ├─ 获取 dataList[index++]
 │   ├─ 尝试执行 requestFn(带重试)
 │   ├─ 记录结果到 results[]
 │   ├─ 调用进度回调
 │   └─ 可选 delay 等待
 └─ 所有 worker 结束后,返回 results

📚 示例代码

全部代码链接

相关推荐
我命由我123452 天前
软件开发 - 避免过多的 if-else 语句(使用策略模式、使用映射表、使用枚举、使用函数式编程)
java·开发语言·javascript·设计模式·java-ee·策略模式·js
第七种黄昏3 天前
大事件项目拆解:登录访问拦截实现详解
前端框架·vue·js
PineappleCode11 天前
用 “私房钱” 类比闭包:为啥它能访问外部变量?
前端·面试·js
上单带刀不带妹21 天前
Web Worker:解锁浏览器多线程,提升前端性能与体验
前端·js·web worke
qq_三哥啊22 天前
【HTML】<script>元素中的 defer 和 async 属性详解
html·js
我命由我123451 个月前
VSCode - VSCode 快速跳转标签页
开发语言·前端·ide·vscode·编辑器·html·js
结衣结衣.1 个月前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
草履虫建模1 个月前
前后端分离项目中的接口设计与调用流程——以高仙机器人集成为例
java·前端·spring boot·机器人·intellij-idea·ruoyi·js
年纪轻轻就扛不住1 个月前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
伍哥的传说1 个月前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js