React Axios实现GET请求延迟 满足每秒3次的请求频率限制

原方案失效原因 #

• 第一种方案：遍历数组时所有setTimeout会在极短时间内全部注册完成，所有定时器计时起点几乎一致，2秒后会同时触发所有请求，远超过每秒3次的限制。
• 第二种方案：setTimeout内部的return无法向外层返回axios实例，你无法拿到请求的返回结果；且所有getTaskDetail调用的定时器还是几乎同时计时，最终还是会批量触发请求，无法控制频率。

推荐实现方案 #

方案1：分组批量发送（效率更高） #

按每3个请求为一组，组内请求并行发送，组间间隔1秒，完全匹配每秒3次的频率要求，总耗时更短：

// 通用延时工具函数
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))

const makeBatchRequest = async () => {
  const batchSize = 3 // 每秒最大请求数
  const allResults = [] // 可用来收集所有请求的返回结果
  for (let i = 0; i < arrayWithObjects.length; i += batchSize) {
    const currentBatch = arrayWithObjects.slice(i, i + batchSize)
    // 并行执行当前组的3个请求
    const batchResults = await Promise.all(
      currentBatch.map(item => getTaskDetail(item._id))
    )
    allResults.push(...batchResults)
    // 非最后一组的话，等待1秒再执行下一组
    if (i + batchSize < arrayWithObjects.length) {
      await delay(1000)
    }
  }
  return allResults
}

// 接口请求方法不需要额外加定时器，直接返回axios实例即可
const getTaskDetail = (taskId: string) => {
  return axios.get(`/admin/task/${taskId}`)
}

方案2：逐个间隔发送（控制更平稳） #

如果需要避免同一时间并发3个请求的突发流量，可以按固定间隔逐个发送，每个请求间隔约334ms，刚好满足每秒3次的要求：

const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))

const makeSerialRequest = async () => {
  const requestInterval = Math.ceil(1000 / 3) // 约334ms
  const allResults = []
  for (const item of arrayWithObjects) {
    const res = await getTaskDetail(item._id)
    allResults.push(res)
    await delay(requestInterval)
  }
  return allResults
}

const getTaskDetail = (taskId: string) => {
  return axios.get(`/admin/task/${taskId}`)
}

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