如何使用来自第一个 API 调用的数据进行进一步的 API 调用？ [复制]答案

【问题标题】：How to make a further API call with data from first API call? [duplicate]如何使用来自第一个 API 调用的数据进行进一步的 API 调用？ [复制]
【发布时间】：2021-10-20 09:06:21
【问题描述】：

我正在尝试从 json 如下所示的初始 API 获取数据：

[
    {
        "id": "1",
        "extraApi": "/api/item_1.json",
        "mData": [
            {
                "name": "plane",
                "url": "/images/item_1.jpg"
            }
     },
    {
        "id": "2",
        "extraApi": "/api/item_2.json",
        "mData": [
            {
                "name": "car",
                "url": "/images/item_2.jpg"
            }
     }
]

我在一个组件中这样称呼：

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

  return items;

}

然后在另一个组件中：

export default function useData() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    getItems()
      .then((res) => setItems(res))
      .catch((err) => setError(err));

  }, []);

  return [
    items
  ];
}

我能够很好地接收和显示数据，但我不确定如何使用第一个 json 数据中的额外 api 进行另一个调用以获取该数据？最好我想在 getItems 组件中进行另一个调用，但我不确定从哪里开始。

item_1 json 看起来像这样：

{
    "id": "1",
    "desc": "Blah Blah",
    "price": "£1.50"
}

【问题讨论】：

标签： javascript reactjs json api fetch

【解决方案1】：

您可以在存储第一次呼叫的响应后拨打另一个呼叫，如下所示：

useEffect(() => {
    
   /*Do another call*/

}, [items]);

每次items 对象更改时都会调用此React.useEffect。因此，在第一次调用中，您将响应数据存储在 items 中，然后调用它。

【讨论】：

【解决方案2】：

您可以将第二个 API 调用放在第一个调用的 .then() 中。

useEffect(() => {
    getItems()
      .then((res1) => {
          setItems(res1)
          return asyncCall2(res1)
       })
      .then((res2) => {
          // use data from second call here
      }
      .catch((err) => setError(err));

}, []);

【讨论】：