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

Question

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

这是我在 React 前端调用我的动作创建者的地方。

 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,274129160671,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 的返回中获取整个结果列表，并从那里连接数组（如果需要）。下面，我不是按 20 对您的 id 进行分组，而是展示了如何利用 Promise.all 发送一堆并等待它们全部解决并对该结果执行某些操作。

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

Answer 2

您可以将请求分成多个批次，并使用Promise.all() 来获取结果，如下所示：

async function getMultiple( input ) {

    if ( input.length < 21 ){
        return axios.get( baseUrl + `id=${input}` );
    } 

    let ids = [ ...input ];
    const batchSize = 20;  
    const requests = [];

    while ( ids.length ){

        let currentBatch = ids.splice( 0, batchSize );
        requests.push( axios.get( baseUrl + `id=${currentBatch}` ) );    

    }

    return await Promise.all( requests );

}
let input = [ 1, 2, 3, 4, ... 24, 25, 25 ];

getMultiple( input ).then( res => console.log(res) );