JavaScript Promises

A JavaScript Promise is an object representing the eventual completion or failure of an asynchronous operation. It is a returned object to which you attach callbacks instead of passing callbacks to a function.

JavaScript Promises have three states:

• pending - this is the default or initialised state
• resolved - this means that the operation was completed
• rejected - when the operation has failed

Creating Promises

A Promise is a constructor function so the new keyword is needed. It takes a function as an argument with two parameters - resolve and reject e.g.

const myPromise = new Promise((resolve, reject) => {
  if(condition is true) {
    resolve('Promise resolved')
  } else {
    reject('Promise rejected')
  }
})

Resolved Promises

Once a Promise is resolved you'll want to do something with the response you get back this is where the then method is used. This will execute as soon as the Promise is resolved.

... resolve('Promise resolved')
.then(response => {
  console.log(response)
}

Rejected Promises

If a Promise is rejected the method used to handle this is catch e.g.

... reject('Promise failed')
.catch(error => {
  console.log(error)
}

There is an additional method that can be used with Promises called finally which is useful for doing some cleaning up once the Promise is finished regardless of whether it was resolved or rejected.

This is an example with the Fetch API which uses Promises under the hood and the free open-source Random User API from this tutorial I found which helped me understand the Fetch API better.

function createNode(element) {
  return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

const url = 'https://randomuser.me/api/?results=20';

fetch(url)
 .then((resp) => resp.json())
 .then((data) => {
   let authors = data.results;
   return authors.map((author) => {
    let li = createNode('li'),
        img = createNode('img'),
        div = createNode('div');
    img.src = author.picture.medium;

    span.innerHTML = `${author.name.first}`;
    append(li, img);
    append(li, div);
    append(ul, li);
  })
})
 .catch((error) => {
   console.log(error); 
});