Two API calls with Promise

by Matthew Day

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://dog.ceo/api/breeds/image/random');
    req.onload = function () {
      if (req.status == 200) {
        var img = JSON.parse(req.response).message;
        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() {
    var output = document.getElementById('output2');
    var req = new XMLHttpRequest();
    req.open('GET', 'https://dog.ceo/api/breeds/image/random');
    req.onload = function () {
      if (req.status == 200) {
        var img = JSON.parse(req.response).message;
        output.innerHTML = "<img src='" + img + "' />";
      } 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.');
}

firstMethod()
	.then(secondMethod)
  .catch(err => {  // this not working yet.
  	console.log(`Houston, we have a problem known as ${err}.`);
  });


/* .then(res => {
  res.map((item, index) => {
  
  })
}) */