function makePromise() {
return new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  else {
    reject(Error("It broke"));

var prom = makePromise('whatever');
prom.then(fulfil handler, reject handler);
prom.then(whatever, whateverError);

getJSON('whatever').then(whatever, whateverError);


Simple Promise

See the Pen Promise by Shane Prendergast (@webknit) on CodePen.

Ajax promise

See the Pen Promise Ajax by Shane Prendergast (@webknit) on CodePen.

Promises are to help prevent “callback hell”, a technique that makes use of nested functions to control the different outcomes of code.

Promises have three states:

  • pending – initial state, not successful or rejected
  • fulfilled – operation successful
  • rejected – operation failed


A promise achieves exactly the same thing as multiple callbacks, but it makes code easier to read and write.

getJSON('whatever.json', function(error, data) {
  if(error) console.log(error);
  else {
    doSomething(data, function(error, something) {
      if(error) console.log(error)
      else {
        doAnotherthing(something, function(error, whatever) {

Posted on

Other library topics


Worthy of Note

Worthy of Note is a site aimed at Web Designers & Developers. It offers a wide range of resources to help assist anyone in the web industry.