Learning ES6 Promise

promise.js

// callback examples
function loadImage(src, parent, callback) {
  const img = document.createElement('img');
  img.src = src;
  img.onload = callback;
  parent.appendChild(img);
}

const imgContainer = document.body;

// pyramid of doom!
loadImage('https://developers.google.com/web/images/contributors/ilyagrigorik.jpg', imgContainer, function() {
  loadImage('https://developers.google.com/web/images/contributors/ilyagrigorik.jpg', imgContainer, function() {
    loadImage('https://developers.google.com/web/images/contributors/ilyagrigorik.jpg', imgContainer, function() {
      loadImage('https://developers.google.com/web/images/contributors/ilyagrigorik.jpg', imgContainer, function() {
        loadImage('https://developers.google.com/web/images/contributors/ilyagrigorik.jpg', imgContainer, function() {
          loadImage('https://developers.google.com/web/images/contributors/ilyagrigorik.jpg', imgContainer, function() {
            loadImage('https://developers.google.com/web/images/contributors/ilyagrigorik.jpg', imgContainer);
          });
        });
      });
    });
  })
});

// Promises

/*
 * States:
 *
 * Fulfilled (resolved): Action related to promise succeeded
 * Rejected: Action related to promise failed
 * Pending: Action related to promise has not yet fulfilled or rejected
 * Settled: The promise has either fulfilled or rejected
 */

// Promise constructor
new Promise(function(resolve, reject) {
  resolve('hello promise'); // works
  resolve('bye promise'); // can't happen a second time
});

// * An event can fire several times but a promise can only settle once

var promise = new Promise(function(resolve, [, reject]) {
  var value = doSomething();
  if (thingWorked) {
    resolve(value);
  } else if (somethingWentWrong) {
    reject();
  }
}).then(function(value) {
  // success!
  return nextThing(value);
}).catch(rejectFunction);

// More examples
function wait() {
  return new Promise(function(resolve, reject) {
    console.log(this);
    setTimeout(function() {
      resolve('promise resolved');
    }, 5000);
  }).then(function(value) {
    console.log(value);
  });
}

function loadImage(url) {
  return new Promise((resolve, reject) => {
    let image = new Image();
  	image.onload = function() {
      console.log(resolve);
      resolve(image);
  	}
    image.onerror = function() {
      let message = 'Could not load image at ' + url;
      reject(new Error(msg));
  	}
    image.src = url;
  });
}

let addImg = (src) => {
  let imgElement = document.createElement('img');
  imgElement.src = src;
  document.body.appendChild(imgElement);
};

Promise.all([
  loadImage('https://developers.google.com/web/images/contributors/ilyagrigorik.jpg'),
  loadImage('https://cdn-images-1.medium.com/fit/c/120/120/0*qH2Wle1736qoCJj3.'),
  loadImage('https://uploads.toptal.io/user/photo/246007/large_0f52e2b640d4ffd9b92771e524feb49d.png')
]).then((images) => {
  images.forEach(img => addImg(img.src));
}).catch((error) => {
  console.log(error);
});

// https://developers.google.com/web/fundamentals/getting-started/primers/promises