React遍历数组批量发API GET请求触发429请求过多错误如何解决

问题根因 #

• 1. 请求参数全部异常：你在循环中反复修改同一个propertyOptions对象的params属性，由于axios请求是异步执行的，等请求真正发起时，所有请求读取的都是最后一次修改的params值，导致所有请求的zpid都相同，和预期遍历每个id的逻辑不符。
• 2. 触发接口限流规则：for循环是同步执行的，会瞬间发起所有请求，远超接口的频率限制，因此返回429错误。

修复方案 #

方案1：串行请求加固定延时（实现最简单，适合数据量不大的场景） #

通过async/await控制请求逐个发送，每次请求完成后等待一段时间再发下一个，避免触发限流。

// 延时工具函数
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))

// 改造请求函数为异步
async function buildCompleteProperties() {
  const updatedList = [...propertyList] // 避免直接修改原state
  for (let i = 0; i < propertyList.length; i++) {
    const currentZpid = propertyList[i].zpid
    // 每次生成新的配置对象，不复用同一个propertyOptions避免参数污染
    const requestOptions = {
      ...propertyOptions, // 复制原有配置（请求头、请求方法等）
      params: { zpid: currentZpid } // 单独设置当前请求的参数
    }
    try {
      const response = await axios.request(requestOptions)
      // 补全对应对象的缺失字段
      updatedList[i] = { ...updatedList[i], ...response.data }
      console.log(`zpid为${currentZpid}的信息获取完成`)
      // 每次请求完成后等待1秒再发下一个，可根据接口限流阈值调整时长
      await sleep(1000)
    } catch (error) {
      console.error(`zpid为${currentZpid}的信息获取失败:`, error)
    }
  }
  // 最后把更新后的数组同步到state，替换为你实际的state更新方法即可
  // setPropertyList(updatedList) 
}

方案2：控制并发数（适合数据量较大的场景，兼顾效率和限流） #

如果数据量较大、串行请求效率太低，可以控制同时发起的请求数量，比如一次最多发2个，等这批请求完成再发下一批，比串行方案效率更高。

// 并发控制函数，limit参数为最大并发数
async function requestWithConcurrencyLimit(list, limit, requestFn) {
  const result = []
  for (let i = 0; i < list.length; i += limit) {
    const chunk = list.slice(i, i + limit)
    const chunkResult = await Promise.all(chunk.map((item, index) => requestFn(item, i + index)))
    result.push(...chunkResult)
  }
  return result
}

async function buildCompleteProperties() {
  const requestFn = async (item, index) => {
    try {
      const response = await axios.request({
        ...propertyOptions,
        params: { zpid: item.zpid }
      })
      return { ...item, ...response.data }
    } catch (err) {
      console.error(`zpid为${item.zpid}的信息获取失败:`, err)
      return item // 请求失败保留原数据，避免列表出现空项
    }
  }
  // 最大并发数设为2，可根据接口限流阈值调整
  const updatedList = await requestWithConcurrencyLimit(propertyList, 2, requestFn)
  // setPropertyList(updatedList) 更新state
}

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