Javascript 如何发送多个AJAX请求并将所有结果异步连接到一个数组中？

我需要通过一个传递ID的ajax请求来获取100个对象，为此我有一个具有100个ID的数组，但我每次发送的ID不能超过20个，所以我必须在从服务器获取所有数据之前将它们逐个发送20个。 以异步方式执行此操作的最佳实践是什么

这就是我现在测试它的方式，我创建了一个全局数组，当我从每个请求中获取数据时，我连接该数组：

window['p'] = [];

function getAllProducts(products) {
    var cont = 0;
    while(cont < products.length){
        (function(cont){
            var req = new XMLHttpRequest();
            var url = '/api/catalog_system/pub/products/search?';

            // concatenate all the id's with the URL
            if (cont === 0){
                url += 'fq=skuId:'+products[0].sku
                for (var i = 1; i < 20; i++) {
                    url+= '&fq=skuId:'+products[i].sku;
                }
            } else {
                for (var i = cont; i < cont + 20; i++) {
                    if (typeof products[i] === 'undefined') {
                        break;
                    }
                    url+= '&fq=skuId:'+products[i].sku;
                }
            }

            req.open('get',url,true);

            req.onreadystatechange = function(){
                if (req.status == 200 || req.status == 206 && req.readyState == '4') {
                    var data = JSON.parse(req.responseText);
                    console.log(data);
                    window['p'].push(data);
                }
            }

            req.send(null);
            console.log(req);
        }(cont))
        cont+=20;
    }
}

getAllProducts(productArray);

window['p']=[]；
函数getAllProducts（产品）{
var-cont=0；
而（续<产品长度）{
（功能（续）{
var req=新的XMLHttpRequest（）；
var url='/api/catalog_system/pub/products/search？'；
//将所有id与URL连接起来
如果（cont==0）{
url+=“fq=skuId:”+产品[0]。sku
对于（变量i=1；i<20；i++）{
url+='&fq=skuId:'+产品[i].sku；
}
}否则{
对于（变量i=cont；i

好的，我回来了：所以

我们使用jQuery在这里和那里都有更干净的代码，为了给示例提供方便，如果您想避免使用jQuery，可以使用原生方式

首先，您需要创建20个ID的组，以使它们准备好对它们进行迭代。 然后您将循环每一个并发送一个ajax，我们将使用jQuery，因为我们将保持代码更干净，同时使用承诺

let products=[{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'},{sku : '151231'},{ sku : '151231'}]; // array of your products here
 let ajaxCallData = [''];
 let counter=0;
 let promises = [];
 let finalDataTable=[];

 // construct a 20 sku's query string for each group of 20's
 for(var i=0,len=products.length-1; i < len; i++)
 {
     if(i%20 == 0 && i > 0){
         ajaxCallData[counter] = ''+ajaxCallData[counter];
         ajaxCallData[++counter]='';      
     }         
     ajaxCallData[counter]+='&fq=skuId:'+products[i].sku;    
}

  // push a promise in the array
  // so we can resolve all of them later on while still fetching them
  $.each(ajaxCallData,function(index){
   promises.push($.get('/api/catalog_system/pub/products/search?'+ajaxCallData[index]));
  })

 // This will resolve when/if all promises have been resolved
 // if any one fails, catch will be fired.
 Promise.all(promises).then(function(values) {
 // values contains the resolved requests
 // in the original order of the first array ( i am pretty sure about it i think)

  if(values && values.length)
      values.forEach(x => finalDataTable.push(x));// gather all data to the target table

}).catch(function(info){
    // handle errors here
});

<代码>让产品<<代码>让产品<<<代码>让产品<{{{{{sku:'151231：：{sku:'1512311'，{sku:'1512310：：：{sku:'1512311'}，{sku:'151231：：{sku:'1512310'151231结结结，{sku:'151231结结结结结，{{sku：：：：：：：'151231结结结结结结结结结结结结结，{{sku：：：：：：：：：：：：：：：：：：：：：：：：：：：：：{sku:'151231：：：：：：：：：：：：：：：：：：：：：：：：：：：'151231结结结结结结结结结结结结结结结结结结结结结结结结结结结结结{sku:'151231'}，{sku:'151231'}，{sku:'1512310：{{{sku:'151231你们们：：{{{{sku:'151231你们们：：：{sku:'151231：：：：{{{{斯古古金币：'151231结结结结结结结结结结结：，{sku:'151231你们们：：：{sku:'151231结结结结结结结结结结，，，{{sku：：：：：：：：：：：：：：：：：：：：：：：：：{{sku:'151231：：：：：：：：：：'151231结结结结结结结结结结结结结结结结结结结结结：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：{{{sku:'151231'}，{sku:'151231'}，{sku:'151231'}，{sku:'151231'}，{sku:'151231'}，{sku:'151231'}，{sku:'151231'}]；//此处是您的产品数组 让ajaxCallData=[''”； 设计数器=0； 让承诺=[]； 设finalDataTable=[]； //为每组20个sku构造一个20个sku的查询字符串 对于（变量i=0，len=products.length-1；i0）{ ajaxCallData[计数器]=''+ajaxCallData[计数器]； ajaxCallData[++计数器]=''； } ajaxCallData[counter]+='&fq=skuId:'+products[i].sku； } //在数组中推送承诺 //因此，我们可以在以后解决所有问题的同时仍然获取它们 $.each（ajaxCallData，函数（索引）{ promises.push（$.get（'/api/catalog_system/pub/products/search？'+ajaxCallData[index]）； }) //当/如果所有承诺都得到解决，这将得到解决 //如果任何一个失败，将被解雇。 承诺。所有（承诺）。然后（函数（值）{ //值包含已解析的请求 //按照第一个数组的原始顺序（我想我很确定） if（值和值.length） values.forEach（x=>finalDataTable.push（x））；//将所有数据收集到目标表 }).catch（函数（信息）{ //在这里处理错误 }); 看看这个提琴，虽然不完全有效，但你可以将它应用到你的案例中（创建一个函数，并将原始产品传递到等）

---

jquery是一个选项吗？@MKougiouris我优先选择纯js，但如果只有AJAX调用使用jquery，我可以将其转换为：DAnd每个AJAX最多可以接受20“&fq=skuId:[SomeID]”？@MKougiouris是的，每个AJAX最多可以接受“&fq=skuId:[SomeID]”：D