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

Question

如何用一个 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"}
   ]
}

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

Answer 1

您可以使用 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]
              }]    
            })
        }
    })

Answer 2

我会把它分成不同的功能，这样你就可以一次专注于一个部分。然后，将它们组合起来以获得所需的所有数据。这样，如果您想以不同的方式使用数据，您还可以重复使用每个功能：

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));
})();

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

How to consume one API endpoint which requires data from another API endpoint (dog.ceo)?

javascript

async-await