title: How to send multiple AJAX requests and join all the results in an array asynchronously?
body: <p>I need to get 100 objects via an ajax request passing an ID, and for that I have an array with 100 ID's, but I cannot send more than 20 ID's per time, so I have to send them 20 by 20 untill I get all the data from server.
  What is the best practice to do this in an asynchronous way?</p>
  
  <p>This is how i'm testing it right now, I created a global array and when I get the data from every request, I concatenate that array:</p>
  
  <pre><code>window['p'] = [];
  
  function getAllProducts(products) {
      var cont = 0;
      while(cont &lt; 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 &lt; 20; i++) {
                      url+= '&amp;fq=skuId:'+products[i].sku;
                  }
              } else {
                  for (var i = cont; i &lt; cont + 20; i++) {
                      if (typeof products[i] === 'undefined') {
                          break;
                      }
                      url+= '&amp;fq=skuId:'+products[i].sku;
                  }
              }
  
              req.open('get',url,true);
  
              req.onreadystatechange = function(){
                  if (req.status == 200 || req.status == 206 &amp;&amp; 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);
  </code></pre>