Chrome控制台批量发送fetch请求如何添加间隔避免服务器异常

现有写法问题 #

你当前的实现存在两个核心问题：

• forEach方法不支持异步等待，回调内的await不会阻塞下一轮迭代，所有fetch请求会几乎同时触发，瞬间超过服务器负载阈值
• 缺少请求间隔控制逻辑

实现代码 #

首先封装一个基于Promise的等待工具函数，搭配async/await实现可控的等待效果，避免原生setTimeout回调嵌套的问题：

// 入参为等待时长，单位：毫秒
const sleep = (delayMs) => new Promise(resolve => setTimeout(resolve, delayMs));

将原forEach循环替换为支持异步等待的for...of循环，在两次请求之间插入等待逻辑：

// 可根据服务器承受能力调整间隔时长，示例为1000即两次请求间隔1秒
const REQUEST_INTERVAL = 1000;

// 要确保外层函数是async修饰的，否则无法使用await
for (const req of request) {
  await fetch(url, req);
  // 上一个请求完成后，等待指定时长再发起下一次请求
  await sleep(REQUEST_INTERVAL);
}

逻辑说明 #

该实现完全避免了setInterval可能出现的请求堆叠问题：只有当上一个请求响应完成、且间隔时长走完之后，才会发起下一个请求，请求节奏完全可控，不会出现服务器未处理完存量请求就又收到新请求的情况。
如果需要在请求发起前等待，将await sleep(REQUEST_INTERVAL)放到fetch代码前即可。

内容的提问来源于stack exchange，提问作者NewJob