如何合并两个结构相同的API JSON响应并加载至同一表格

核心思路 #

由于两个接口返回的JSON结构完全一致，只需将两个响应中的数据列表合并为一个数组，即可直接用于表格渲染。

步骤与代码示例 #

1. 优化请求方式
   用Promise.all同时发起两个请求，相比依次await能减少等待时间，提升效率：

const [response, response2] = await Promise.all([
  axios.get(URL, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  }),
  axios.get(URL2, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })
]);

2. 合并响应数据
   根据接口返回的实际结构调整数据提取路径：

• 如果接口返回的是包含数据列表的对象（比如{ data: { items: [...] } }）：

const mergedData = [...response.data.items, ...response2.data.items];

• 如果接口直接返回数组（response.data就是数据列表）：

const mergedData = [...response.data, ...response2.data];

3. 可选：去重处理
   若两个接口可能返回重复数据，可根据唯一标识（如id）去重：

const uniqueMergedData = Array.from(new Map(
  [...response.data.items, ...response2.data.items].map(item => [item.id, item])
).values());

4. 渲染表格
   将mergedData或uniqueMergedData传入表格组件的数据源即可。

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