如何利用首次API调用返回的数据发起后续级联API请求

实现方案 #

你可以在getItems函数内拿到初始接口返回的数组后，通过Promise.all并行请求每个条目对应的extraApi接口，再将返回的额外数据合并到原有条目对象中即可，修改后的代码如下：

export default async function getItems() {
  const response = await fetch('/api/items.json');
  const items = await response.json();

  // 遍历每个item发起extraApi请求，合并数据
  const itemsWithExtra = await Promise.all(
    items.map(async (item) => {
      try {
        const extraRes = await fetch(item.extraApi);
        const extraData = await extraRes.json();
        // 合并原有字段和额外字段
        return { ...item, ...extraData };
      } catch (e) {
        // 单个额外接口请求失败时可自行设置兜底逻辑，这里保留原数据返回
        console.error(`请求${item.extraApi}失败`, e);
        return item;
      }
    })
  );

  return itemsWithExtra;
}

你原来的useData自定义Hook不需要做任何调整，获取到的items数组里已经自动包含了desc、price等额外接口返回的字段，可以直接读取使用。

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