如何依次调用 Web 服务端点？

Question

我想在 JavaScript 中实现一个函数，它调用一系列 Web 服务端点并检查 API 调用的响应中的值。我需要以首先调用第一个端点页面的方式实现它，然后会有一个过滤器方法从响应中过滤掉特定对象。如果找到对象，则此过程应该中断并且必须返回对象。但是，如果在第一个端点中找不到对象，则必须调用第二个端点并重复相同的过程，直到找到对象。

我正在处理的 Web 服务端点是：

https://jsonmock.hackerrank.com/api/countries?page=1

此 API returns 国家/地区数据列表。这里页面查询的值从 1 到 25 不等。我需要调用端点并检查从 1 到 25 的特定国家，直到找到国家对象。

我尝试使用 JavaScript Promise 和 Fetch API 来实现这一点，但想不出一个接一个地调用 API 的方法。

非常期待您的回答。提前谢谢你。

Answer 1

您可以为此使用 async 和 await：

async function findCountry(country) {
    for (let page = 1; page < 26; page++) {
        console.log("page = " + page); // for debugging only
        let response = await fetch("https://jsonmock.hackerrank.com/api/countries?page=" + page);
        let {data} = await response.json();
        let obj = data.find(obj => obj.name == country);
        if (obj) return obj;
    }
}

let country = "Belgium";
findCountry(country).then(obj => {
    if (obj) {
        console.log("The capital of " + country + " is " + obj.capital);
    } else {
        console.log("Could not find " + country);
    } 
});

如果您知道数据是按国家/地区名称排序的，那么您可以使用二进制搜索来减少平均请求数。

Answer 2

这里有一种方法可以做到。

const url = 'https://jsonmock.hackerrank.com/api/countries'

const fetchFromApi = async (countryName, page) => {
  const res = await fetch(`${url}?page=${page}`)
  return await res.json()
}

const getCountryFromResults = (countryName, data) => {
  const country = countryName.toLowerCase()
  return data.find(({name}) => name.toLowerCase() === country)
}

const findCountry = async (countryName) => {
  let page = 1;
  let totalPages = 1;

  while(page <= totalPages) {
    const res = await fetchFromApi(countryName, page);
    if(totalPages < res.total_pages) {
      totalPages = res.total_pages
    }
    const country = getCountryFromResults(countryName, res.data)
    if(country){
      return country
    }
    page = page + 1
  }
  
}

( async () => {
  console.log(await findCountry("Afghanistan"))

  console.log(await findCountry("Argentina"))
}
)()

如何依次调用 Web 服务端点？

How to call web service endpoints one after other?

javascript

api

fetch-api