title: JavaScript Wait until all async calls finish
body: <p>I need some help with handling async calls in JavaScript. I have a for loop, each loop calls an async HttpRequest, and adds its response to an array. I want the program to wait until all the async calls are finished before proceeding without jQuery (which is only used for DOM manipulation). I've searched quite bit for solutions but none really worked without heavily changing my code or relying on jQuery.</p>
  
  <pre><code>function httpGet(theUrl, callback) {
      var xmlRequest = new XMLHttpRequest();
      xmlRequest.onreadystatechange = function() {
          if (xmlRequest.readyState == 4 &amp;&amp; xmlRequest.status == 200) {
              callback(xmlRequest.responseText);
          }
      }
      xmlRequest.open("GET", theUrl, true);
      xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xmlRequest.setRequestHeader("Accept", "application/json");
      xmlRequest.send(null);
  }
  $(document).ready(function() {    
      var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
      var urls = channels.map((x) =&gt; "https://api.twitch.tv/kraken/channels/" + x);
      var data = [];
      (function(urls, data) {
          urls.forEach(function(url) {  
              function(resolve, reject) {
                  httpGet(url, function(response) {
                      data.push(JSON.parse(response));
                  })
              };
          })
      })(urls, data);
  
      // Continue after all async calls are finished
  })
  </code></pre>
  
  <p><strong>UPDATED</strong>: Edited with Promise, but still not working, maybe I did something wrong.</p>
  
  <pre><code>function httpGet(theUrl, callback) {
      return new Promise(function(resolve, reject) {
          var xmlRequest = new XMLHttpRequest();
          xmlRequest.onreadystatechange = function() {
              if (xmlRequest.readyState == 4 &amp;&amp; xmlRequest.status == 200) {
                  callback(xmlRequest.responseText);
              }
          }
          xmlRequest.open("GET", theUrl, true);
          xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          xmlRequest.setRequestHeader("Accept", "application/json");
          xmlRequest.send(null);
      })
  }
  $(document).ready(function() {    
      var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
      var urls = channels.map((x) =&gt; "https://api.twitch.tv/kraken/channels/" + x);
      var data = [];
      var promises = [];
      (function(urls, data) {
          urls.forEach(function(url) {  
              var promise = httpGet(url, function(response) {
                  data.push(JSON.parse(response));
              });
              promises.push(promise);
          })
  
          Promise.all(promises).then(function() {
              console.log(data);
          })
      })(urls, data);
  })
  </code></pre>