如何使用 javascript 承诺使一个函数等待另一个函数异步完成运行？

Question

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

It is still not waiting for populateVenueIDs before running populateFsPotoRequestURLs.

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.

Answer 1

Your populateVenueIDs function just resolves to done without waiting for the onload functions to be called. If you can, fetch would be a nice alternative because it returns promises but that isn't supported in IE.

What you can do, is create a promise for each iteration of your loop and use Promise.all(arrayOfPromises) to wait for all requests. This will even execute all XMLHttpRequest in parallel!

Example code:

let populateVenueIDs = new Promise(function(resolve, reject) {
    let promises = [];

    for (let y = 0; y < window.coffeeShopLocations().length; y++) {
        promises.push(new Promise(function (resolve) {
            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]);
                resolve();
            };
            getVenueIDFromFS.send();
        }));

    }
    return Promise.all(promises)
        .then(function () {
            resolve('Done!');
        })
}); 

Fetch Solution

As you've said this is an assignment, you probably can use ES6 with async and await so this would be a fancy solution:

async function populateVenueIDs() {

    let promises = [];

    for (let y = 0; y < window.coffeeShopLocations().length; y++) {
        promises.push(new Promise(async resolve => {
            const response = await fetch(window.fsURL[y]);
            const data = await response.json();
            window.fsVenueID[y] = data.venues[0].id;
            resolve();
        }));
    }

    await Promise.all(promises);
}

Answer 2

While I feel strongly that @JensV had the right answer, and I said so in my comment, I just wanted to follow up on what your code might look like if you used fetch (I only included the relevant piece of JensV's answer.

var promises = [];

for (let y = 0; y < window.coffeeShopLocations().length; y++) {
    promises.push(fetch(window.fsURL[y])
      .then(response => response.json())
      .then(data => {
        window.fsVenueID[y] = data.response.venues[0].id;
      }));
}

EDIT: For posterity's sake I posted this before Jens added his fetch solution :)