Making Promises. Javascript ES6 async for humans.

Javascript ES6 adds the ability to use the Promise.  Just as its name gives away, a Promise allows code to call an asyncronous function without regards to when that function will return code. It “promises” a result at some point in the future.

Here’s the example I keep seeing around the innerwebs:

var promise = new Promise( resolve, reject ) {
  /* Here is what I want to do for you
     This could be done asyncronously and I'll let you know
     when this is done.
     Done could mean I couldn't finish */
  if (/* everything is awesome */ ) {
    resolve( 'Heres your datas' );
  } else {
    reject( 'I dont knows' )
  }
});

// Here's a way to call it, result and err would be callback functions
promise.then( result, err );

//long form
promise.then( function( result ) {
  console.log( result );
}, function( err ) {
  console.log( err );
});

Not sure about you, but I don’t like the terminiology I’ve found in most write ups on the Promise. I’m a human, and I don’t “resolve” or “reject” a promise I make. I can’t “error” on a promise. And to me, a “result” absolutely COULD be an “error”, just not the result we want.

This really messed with my brain while trying to understand Promises. Seriously. Like I said, I’m a human and speak human, American English.

So how would I explain it better? Not sure I can, but here’s where I would start.

var myPromiseToYou = new Promise( kept, broken ) {
  if ( /* did we do what we promised? */ ) {
    kept( 'heres your datas' );
  } else {
    broken( 'too bad, soo sad' );
  }
});

//now we call it, simply
myPromiseToYou.then( keptPromiseResultCallback, brokenPromiseResultCallback )

//long form
myPromiseToYou.then( function ( keptPromiseResult ) {
  console.log( keptPromiseResult );
}, function( brokenPromiseResult ) {
  console.log( brokenPromiseResult );
});

So what’s this actually doing?  We’re putting some anonymous functions inline in place of the keptPromiseResultCallback and brokenPromiseResultCallback.
The code passes those functions back (callback) into the kept and broken parameters in the original definition of the Promise. So when the original definition says “kept(‘Heres your datas’)”, what it’s actually saying is “console.log(‘Heres your datas’)”.

It would like like this if we subbed in the inline functions from above for ‘kept’ and ‘broken’.

var myPromiseToYou = new Promise( ) {
  if (/* did we do what we promised? */) {
    //kept('heres your datas');
    console.log( 'heres your datas' );
  } else {
    //broken('heres your datas');
    console.log( 'too bad, soo sad' );
  }
});

This is barely the tip of the iceburg with the Promise. You can stack a bunch of catch() and then()s around to give you some deep power. There’s also Promise.all and other methods you can call.

I hope reading this made the basic premise of a Promise more clear. I know writing this helped me!

Here’s a good link to a Google write up on the Promise in ES6 https://developers.google.com/web/fundamentals/getting-started/primers/promises

Published by

Jason Woods

Jason is a self proclaimed geek, gourmand, beer and espresso nut and father to a smart-as-a-whip young lad. In his spare time he manages the Integrated Core Services tribe at the University of Chicago Medicine.

One thought on “Making Promises. Javascript ES6 async for humans.”

  1. function addPromise (a,b) {

    return new Promise(function ( kept, broken ) {

    if ( typeof a === 'number' && typeof b === 'number' ) {
    kept(a + b);
    } else {
    broken('Buzz');
    }
    });
    }

    addPromise(7,1).then( function(keptPromiseResult) {
    console.log(keptPromiseResult);
    }, function( brokenPromiseResult) {
    console.log(brokenPromiseResult);
    });

    addPromise(7).then( function(keptPromiseResult) {
    console.log(keptPromiseResult);
    }, function( brokenPromiseResult) {
    console.log(brokenPromiseResult);
    });

    addPromise(7,'Boom').then( function(keptPromiseResult) {
    console.log(keptPromiseResult);
    }, function( brokenPromiseResult) {
    console.log(brokenPromiseResult);
    });

    ---
    node example-promise.js
    8
    Buzz
    Buzz

Leave a Reply

Your email address will not be published. Required fields are marked *