如何将接收不同参数的函数返回的多份响应合并为单个数组

你的代码存在3个核心问题：未正确处理异步逻辑、每次更新状态直接覆盖旧值、没有统一收集所有请求的返回结果，以下是修复后的实现：

完整批量请求合并实现（推荐） #

该方案等待所有请求完成后一次性合并更新，性能更好：

// 请求参数配置
const data = [
  {id:1,name:"currency"},
  {id:2,name:"merchant"},
  {id:3,name:"broker"},
]

// 异步请求函数补充async关键字和异常处理
const getResponsedata = async (name) => {
  try {
    const response = await axios.get(`/api/data/${name}`)
    return response
  } catch (err) {
    console.error(`接口${name}请求失败`, err)
    return null
  }
}

// 批量请求+结果合并逻辑
const loadAllData = async () => {
  // 同时发起所有请求
  const requestTasks = data.map(item => getResponsedata(item.name))
  const allResponses = await Promise.all(requestTasks)

  // 过滤有效响应，合并所有结果到同一个数组
  const mergedResult = allResponses.reduce((total, res) => {
    if (res?.status === 200 && res?.data) {
      // 兼容返回单个对象/数组两种情况
      const currentData = Array.isArray(res.data) ? res.data : [res.data]
      return [...total, ...currentData]
    }
    return total
  }, [])

  // 一次性更新状态
  setData(mergedResult)
}

// 执行函数触发请求
loadAllData()

逐次请求追加实现 #

如果需要拿到一个请求结果就立刻更新到页面，可以用该实现：

const loadDataSequentially = async () => {
  const mergedResult = []
  for (const item of data) {
    const res = await getResponsedata(item.name)
    if (res?.status === 200 && res?.data) {
      const currentData = Array.isArray(res.data) ? res.data : [res.data]
      mergedResult.push(...currentData)
      setData([...mergedResult])
    }
  }
}

loadDataSequentially()

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