promises-in-sequence-and-parallel.js

function workAfterDataRetrieved (data) {
  return new Promise((resolve) => {
    // doSomeDutyTaskHere();
    console.log('task done: ' + data.name);
    resolve();
  });
}

function getJSON (url) {
  console.log('sent: ' + url);
  return fetch(url).then((response) => {
    console.log('received: ' + url);
    return response.json();
  });
}

window.addEventListener('WebComponentsReady', function() {
  getJSON('/api/some.json')
  .then(function(response) {
    var sequence = Promise.resolve();

    // .map executes all of the network requests immediately, because Promise (fetch in getJSON) is executed immediately
    var arrayOfExecutingPromises = response.results.map((url) => getJSON(url));

    arrayOfExecutingPromises.forEach((request) => {
      // Loop through the pending requests that were returned by .map (and are in order) and turn them into a sequence.
      // request is a getJSON() that's currently executing.
      sequence = sequence.then(() => {
        // Remember that createPlanetThumb is a Promise, so it must resolve before Promises later in the sequence can execute.
        return request.then(workAfterDataRetrieved);// doTaskInSequenceAsSoonAsItsNeededDataIsLoaded
      });
    });
  });
});