title: How can I use a javascript promise to make one function wait for another to finish running asynchronously?
body: <pre><code>// TODO: FIX CODE - IT IS STILL NOT WAITING FOR populateVenueIDs
  // BEFORE CALLING populateFsPhotoRequestURLs
  // must use async, not sync to meet assignment requirements.
  
  let populateVenueIDs = new Promise(function(resolve, reject) {
    for (let y = 0; y &lt; window.coffeeShopLocations().length; y++) {
      let getVenueIDFromFS = new XMLHttpRequest();
      getVenueIDFromFS.open('GET', window.fsURL[y]);
      getVenueIDFromFS.onload = function() {
        let responseFromFS = JSON.parse(getVenueIDFromFS.responseText);
        window.fsVenueID[y] = responseFromFS.response.venues[0].id;
        console.log(window.fsVenueID[y]);
      }; 
      getVenueIDFromFS.send();
    } 
    resolve("done!");
  }); 
  
  function populateFsPhotoRequestURLs() {
    for (let y = 0; y &lt; window.coffeeShopLocations().length; y++) {
      window.fsPhotoEndpoint[y] = 'https://api.foursquare.com/v2/venues/'
        + window.fsVenueID[y] + '/photos';
      window.fsPhotoRequestURL[y] = fsPhotoEndpoint + '?' + fsPhotoParams;
      console.log(window.fsPhotoRequestURL[y]);
    } 
  } 
  
  
  populateVenueIDs.then(
    populateFsPhotoRequestURLs()
  );
  
  </code></pre>
  
  <p>It is still not waiting for populateVenueIDs before running populateFsPotoRequestURLs.</p>
  
  <p>I have also tried variants of await, promise, and then. I have read about 15 tutorials about those topics, but none are close enough to do what I want. I don't want to use a timeout (which 90% of tutorials use) because that would unnecessarily slow down the application. I have to use async to meet the assignment requirements. 
  Please help me connect the dots to apply a promise and/or await/then that will apply in this situation.</p>