如何将多个GET请求返回的数组合并为单个数组？concat函数失效求助

你的核心问题在于两点：

• 每次请求完成后直接用setUrlGetImage(response.data)，会覆盖之前的结果，而非合并数组
• 异步请求没有被统一等待，导致你尝试用concat时，可能部分请求还未返回结果

修改后的完整实现代码： #

// 生成ID数组（这部分逻辑可以保留）
const arrayIdImage = data.value.map((item) => JSON.parse(item.Image));

// 封装单个请求的异步函数
const fetchThumbnails = async (itemId) => {
  const optionsImage = {
    method: 'GET',
    url: `/items/${itemId}/thumbnails`,
    headers: {
      'Authorization': `Bearer ${tokenJson}`
    }
  };
  const response = await axios.request(optionsImage);
  return response.data; // 返回当前请求的数组结果
};

// 批量请求并合并数组的主函数
const mergeAllThumbnails = async () => {
  // 收集所有请求的Promise实例
  const requestPromises = arrayIdImage.map(id => fetchThumbnails(id));
  // 等待所有请求完成，拿到所有返回的子数组组成的数组
  const allSubArrays = await Promise.all(requestPromises);
  // 合并所有子数组为一个一维数组
  const mergedArray = allSubArrays.flat(); 
  // 也可以用兼容旧环境的写法：[].concat(...allSubArrays)
  // 更新状态
  setUrlGetImage(mergedArray);
};

// 执行合并操作
mergeAllThumbnails();

关键细节说明： #

• Promise.all：强制等待所有异步请求完成后再处理结果，避免因异步执行顺序导致的结果缺失或不完整
• 数组合并方式：
  • flat() 是ES2019+支持的语法，直接将二维数组拍平为一维，写法简洁
  • [].concat(...allSubArrays) 是更兼容的写法，通过展开运算符把所有子数组传入concat实现合并
• 避免在map中直接更新状态：每次setUrlGetImage都会触发组件重渲染，且会覆盖之前的数据，统一在所有请求完成后再更新状态才是正确逻辑

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