如何使用需要来自另一个 API 端点（dog.ceo）的数据的 API 端点？

Posted 2023-02-22

【中文标题】如何使用需要来自另一个 API 端点（dog.ceo）的数据的 API 端点？

【英文标题】：How to consume one API endpoint which requires data from another API endpoint (dog.ceo)?

【发布时间】：2022-01-24 04:28:24

【问题描述】：

如何从一个 api 使用另一个 api。

var url_1 = 'https://dog.ceo/api/breeds/list/all';

fetch(url_1)
     .then( response => response.json())
     .then(data => 
const breeds = data.message;
var arr = [];

for (var b in breeds) 
      arr.push(
           breed : b,
           subBreeds : [
             breeds[b][0]
           ],
          images : [
            url: ''
          ]
      )
  

我还有这个其他 api，我从中提取每种狗的图像，但在这里你需要作为狗品种名称的变量。

var url_2 = 'https://dog.ceo/api/breed/breed_name/images';

fetch(url_2)
   .then( response => response.json())
   .then(data => 
      const images = data.message;
      var arr_images = [];  

   for (var i in images) 
        arr_images.push(
          images : [
            url: images[i]
          ]    
        )
    

那么我不知道的，怎么加入才能把狗的品种名称发送到第二个api消费呢？

我怎样才能将图像的排列与上面的排列结合起来？

应该是这样的

 "breed": "Hound", 
  "subBreeds": [ 
    "subBreedA", 
    "subBreedB", 
    "subBreedC" 
   ], 
  "images":[
     "url":"http://some.url.com",
    "url":"http://some.other.url"
   ]

希望我已经说清楚了，感谢您的帮助，我将不胜感激。

【参考方案1】：

我会将其拆分为单独的功能，以便您一次只专注于一个部分。然后，将它们组合起来以获得您想要的所有数据。这样，您还可以重复使用每个函数，以防您想以不同的方式使用数据：

TS Playground

// dog.ceo API

async function fetchDogApiResult (apiPath) 
  const response = await fetch(`https://dog.ceo/api/$apiPath`);
  if (!response.ok) throw new Error(`Response not OK ($response.status)`);
  const data = await response.json();
  if (data.status !== 'success') throw new Error('Response not successful');
  return data.message;


async function fetchBreeds () 
  return fetchDogApiResult('breeds/list/all');


async function fetchSubBreeds (breed) 
  return fetchDogApiResult(`breed/$breed/list`);


async function fetchImages (breed, subBreed) 
  return fetchDogApiResult(`breed/$breed$subBreed ? `/$subBreed` : ''/images`);


async function fetchDogData () 
  const breeds = await fetchBreeds();
  return Promise.all(Object.entries(breeds).map(async ([breed, subBreeds]) => (
    breed,
    subBreeds,
    images: (await fetchImages(breed)).map(url => (url)),
  )));


(async () => 
  const dogData = await fetchDogData();
  console.log(JSON.stringify(dogData));
)();

【参考方案2】：

您可以使用async/await 在第一个api 的第二个then 中调用第二个api，从第二个api 获取数据后，您可以使用for 循环。像这样

        var url_1 = 'https://dog.ceo/api/breeds/list/all';

    fetch(url_1)
         .then( response => response.json())
         .then(async data => 
    const breeds = data.message;
    const resUrl2 = await fetch(url_2)
    const dataUrl2 = await resUrl2.json()
    var arr = [];

    for (var b in breeds) 
          arr.push(
               breed : b,
               subBreeds : [
                 breeds[b][0]
               ],
              images : [
                url: ''
              ]
          )
      

    const images = dataUrl2.message;
          var arr_images = [];  

       for (var i in images) 
            arr_images.push(
              images : [
                url: images[i]
              ]    
            )
        
    )