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

【问题标题】：How to consume one API endpoint which requires data from another API endpoint (dog.ceo)?如何使用需要来自另一个 API 端点（dog.ceo）的数据的 API 端点？
【发布时间】：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"}
   ]
}

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

【问题讨论】：

标签： javascript async-await

【解决方案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]
              }]    
            })
        }
    })

【讨论】：