javascript - 处理具有数据限制限制的重复 API 查询的最佳方法

Question

我正在使用 eBay API，特别是 GetMultipleItems 调用，它为 api 查询提供项目 ID 列表以返回数据。我面临的问题是 API 的每次查询限制为 20 个项目 ID。我在我的后端 Node 中进行调用，并通过 React 和 Redux 返回数据。

这是我在 React 前端调用我的 action creator 的地方。

 useEffect(() => {
    props.getUpdates(formatFavs);
  }, [props.favorites]);

请注意，formatFavs 是逗号分隔的 itemID 列表

这是我的 getUpdates 操作创建器

export const getUpdates = id => {
  return async dispatch => {
    const updates = await dataService.getMultiple(id);
    dispatch({
      type: "GET_DATA",
      data: updates
    });
  };
};

它指向我对后端的 axios 调用。

const getMultiple = query => {
  const request = axios.get(baseUrl + `?id=${query}`);
  console.log("URL", baseUrl + `?id=${query}`);
  console.log("Request", request);
  return request.then(response => response.data);
};

调用结果是这样的

https://open.api.ebay.com/shopping?callname=GetMultipleItems&appid=XX&responseencoding=JSON&ItemID=231560863628,223787055529,392521444227,352879382550,274129160671,2741 29160671,274129160671,123998356843,223787055529,383011548243,223787055529, 392521444227,352879382550,123998356843,274129160671,133268486829,223787404912'

目前，如果有超过 20 个 ID，则会在 API 端产生错误。

我需要弄清楚如何处理超过 20 个 ID 的情况

我最初的想法是在我的 getMultiple 调用开始时放置一个条件语句。

有点像

if query.length >20 {
   newQuery = query.slice(1,19) 
   const request = axios.get(baseUrl + `id=${newQuery}
   return request.then(response => response.data)
 }

虽然我不确定从这里去哪里...只是在寻找一些建议，因为我正在努力想出正确的解决方案

已更新——根据 Kostas 的指导进行了这项工作。这是代码:

import axios from "axios";
const baseUrl = "/getMultiple";

async function getMultiple(query) {
  if (query.length < 21) {
    const request = axios.get(baseUrl + `?id=${query}`);
    return request.then(response => response.data);
  }

  let ids = [...query];
  console.log("IDS", ids);
  const batchSize = 20;
  const requests = [];

  while (ids.length) {
    let currentBatch = ids.splice(0, batchSize);
    console.log("Current batch", currentBatch);
    requests.push(axios.get(baseUrl + `?id=${currentBatch}`));
  }

  console.log("Requests", requests);

  const final = await Promise.all(requests);
  const finalData = final.map(dataArray => dataArray.data);
  const arrayData = Array.prototype.concat(...finalData);

  return arrayData;
}

export default {
  getMultiple
};

Answer 1

我会分解您的调用并将它们分组到一个 Promise 数组中。 axios.get 返回一个 Promise，因此您可以使用它代替示例函数 (httpGet(id))

基本上，创建一个方法来接收 n 个收藏夹。然后，使用 axios 调用将您的 ID 分成 20 个一组。因此，如果您收到 60 个 ID，您最终会进行 3 次 API 调用(每个调用有 20 个 ID)。

然后您可以在 Promise.all 的返回中获取整个结果列表，并从那里连接数组(如果需要)。下面，我不是将您的 ID 按 20 分组，而是演示如何利用 Promise.all 发送一堆并等待所有 ID 解析并对结果执行某些操作.

function httpGet(id) {
  return fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then(response => response.json());
}

function getFavorites(ids) {
  // TODO: Implement logic to group promise array by chunks of 20
  const promises = ids.map(id => httpGet(id));
  return Promise.all(promises);

}

getFavorites([1, 2, 3, 4, 5, 6, 7, 8, 9]).then(results => console.log(results));