Two API calls with Promise

by aflynt

HTML

<div id="output1" class="nimg"></div>
<div id="output2" class="nimg"></div>

CSS

div {
  display: inline-block;
  margin-right: 20px;
}

img {
  height: 100%;
  width: auto;
}

.nimg {
  height: 300px;
  width: 200px;
}

JavaScript

var firstMethod = function() {
	const promise = new Promise((resolve, reject) => {
    var output = document.getElementById('output1');
    var req = new XMLHttpRequest();
    req.open('GET', 'https://www.omdbapi.com/?t=Game of Thrones&Season=1&Episode=1');
    req.onload = function () {
      if (req.status == 200) {
        var img = JSON.parse(req.response).Poster;
        output.innerHTML = "<img src='" + img + "' />";
        console.log('First method complete.');
        resolve();
      } else {
        console.log('ERROR', req.statusText);
      }
    };
    req.onerror = function () {
      console.log('Network Error');
    };
    req.send(); // Add request to task queue
  });
  return promise;
}

var secondMethod = function() {
	const promise = new Promise(function(resolve, reject) {
    var output = document.getElementById('output2');
    var req = new XMLHttpRequest();
    req.open('GET', 'https://www.omdbapi.com/?t=Game of Thrones&Season=1&Episode=2');
    req.onload = function () {
      if (req.status == 200) {
        var img = JSON.parse(req.response).Poster;
        output.innerHTML = "<img src='" + img + "' />";
        resolve();
      } else {
        console.log('ERROR', req.statusText);
      }
    };
    req.onerror = function () {
      console.log('Network Error');
    };
    req.send(); // Add request to task queue
    console.log('Second method complete.');
  });
  return promise;
}

firstMethod()
	.then(secondMethod);