JS - promise.all

The Promise.all() method returns a single Promise that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. It rejects with the reason of the first promise that rejects.

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});

function get(url) {
  return new Promise(function(resolve, reject) {
    let httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', url);
    httpRequest.onload = function() {
      if (httpRequest.status === 200) {
        // Resolve the promise with the response text
        // success(httpRequest.responseText);
        resolve(httpRequest.response);
      } else {
        // Reject the promise with the status text
        // fail(httpRequest.status);
        reject(Error(httpRequest.statusText));
      }
    };

    // Handle network errors
    httpRequest.onerror = function() {
      reject(Error('Network Error'));
    };

    httpRequest.send();
  });
}

function successHandler(data) {
  const dataObj = JSON.parse(data);
  // const weatherDiv = document.querySelector('#weather');
  const div = `
        <h2 class="top">
        <img
            src="http://openweathermap.org/img/w/${dataObj.weather[0].icon}.png"
            alt="${dataObj.weather[0].description}"
            width="50"
            height="50"
        />${dataObj.name}
        </h2>
        <p>
          <span class="tempF">${tempToF(dataObj.main.temp)}&deg;</span> | 
          ${dataObj.weather[0].description}
        </p>
    `;
  return div;
  // weatherDiv.innerHTML = weatherFragment;
}

function failHandler(status) {
  console.log(status);
}

function tempToF(kelvin) {
  return ((kelvin - 273.15) * 1.8 + 32).toFixed(0);
}

document.addEventListener('DOMContentLoaded', function() {
  const apiKey = 'd126cacbbfebf7c84ad878e9deffc0e1';
  //const apiKey = '';
  const weatherDiv = document.querySelector('#weather');

  const locations = [
    'los+angeles,us',
    'san+francisco,us',
    'lone+pine,us',
    'mariposa,us'
  ];
  const urls = locations.map(function(location) {
    return `https://api.openweathermap.org/data/2.5/weather?q=${location}&APPID=${apiKey}`;
  });

  // get(url, successHandler, failHandler);
  Promise.all([get(urls[0]), get(urls[1]), get(urls[2]), get(urls[3])])
    .then(function(responses) {
      return responses.map(function(response) {
        return successHandler(response);
      });
    })
    .then(function(literals) {
      weatherDiv.innerHTML = `<h1>Weather</h1>${literals.join('')}`;
    })
    .catch(function(status) {
      failHandler(status);
    })
    .finally(function() {
      weatherDiv.classList.remove('hidden');
    });
});

Polyfilling promises for older browsers