如何为不同的 API 页面获得一个响应

Question

我正在尝试从具有不同页面 URL 的 API 获得一个响应，我怎样才能在一个 API 调用中实现这一点。

这是我的代码

async function arrayFetcher (){
      // Get `urlArray` from object param
      let urlArray = [];
      let url = ""
      for(let i = 1; i < 20; i++) {
          url = `https://api.google.com/page=250&page=${i}&sparkline=false`
      }
      const resp =  await axios.get(url)
      const response = await urlArray?.Promise?.all(resp).then(res => res.json());
      console.log(response)
  };

Answer 1

你可以使用Promise.all 。 制作一个数组（比如说urls ）然后 -

const results = await Promise.all(urls.map(async url => {
  const resp = await axios.get(url);
  return resp.json();
}));

更新：您还需要将 url 推送到urlArray

for(let i = 1; i < 20; i++) {
    url = `https://api.google.com/page=250&page=${i}&sparkline=false`;
    urlArray.push(url);
}

然后在Promise.all中使用它。

Answer 2

你可以用 Promise.all 做到这一点，一个例子可能是：

const fetchData = async () => {
    const url1 = 'https://jsonplaceholder.typicode.com/todos/1'
    const url2 = 'https://jsonplaceholder.typicode.com/todos/2'
    const url3 = 'https://jsonplaceholder.typicode.com/todos/3'

    const result = await Promise.all([fetch(url1), fetch(url2), fetch(url3)])
    const dataArr = result.map(result => result.json())
    const allData = Promise.all(dataArr)
    return allData
}


fetchData().then(res => console.log(res))

https://jsfiddle.net/0gkhmcbp/

Answer 3

这不会导致一次 API 调用，而是网络将看到每个 URL 一次调用，该调用由axios.get(url)调用。 要进行一次 API 调用并获取相同的数据，需要端点或新端点上的附加参数； 这是 API 所有者的服务器端更改。

Axios 不需要response.json()因为它已经为你做了。 浏览器原生Fetch API确实需要它， fetch(url).then(res => res.json()).then(data => console.log(data)) 。

 async function arrayFetcher() { // generate 5 urls to fetch // API starts at 1 but index at 0, so `index+1` for valid URI const urls = [...Array(5).keys()].map((item, index) => `https://jsonplaceholder.typicode.com/todos/${index+1}`); // make API calls const results = await Promise.all(urls.map(async url => await axios.get(url))); // display each result // Axios places the value in `data` property results.forEach(result => console.log(result.data)); } arrayFetcher();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>

您可能会改进此代码以将数组生成与 fetcher 函数分开，并将数组作为参数传递。 例子：

async function arrayFetcher(urls) { /*...*/ }

function generateUrlArray(baseUrl, amount) {
  return [...Array(amount).keys()].map((item, index) => `${baseUrl}${index+1}`);
}

const urls = generateUrlArray('https://example.com/', 5); // generate array

arrayFetcher(urls);