在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

📚 示例代码

全部代码链接

相关推荐
3824278272 天前
JS表单验证:className与classList区别详解
js
REDcker2 天前
Android WebView 版本升级方案详解
android·音视频·实时音视频·webview·js·编解码
winfredzhang3 天前
[实战] Node.js + DeepSeek 打造智能档案归档系统:从混乱到有序的自动化之旅
css·node.js·js·deepseek api
梦凡尘4 天前
前端web端解析 Word、Pdf 文档文本内容
pdf·js
梦凡尘5 天前
Marked.js 的使用及相关问题解决
前端·js
想看一次满天星8 天前
某里231——AST解混淆流程
爬虫·python·ast·js·解混淆
Han.miracle8 天前
JavaScript 基础核心知识点闯关练习
css·js
冥界摄政王8 天前
CesiumJS学习第四章 替换指定3D建筑模型
3d·vue·html·webgl·js·cesium
曲幽10 天前
手把手搞定FastAPI静态文件:安全、上传与访问
css·python·fastapi·web·js·favicon·staticfiles
冥界摄政王10 天前
Cesium学习第二章 camera 相机
node.js·html·vue3·js·cesium