Promises: Tips and Articles

JavaScript
1

Here’s a collection of articles on ES6 promises that I found particularly useful:

Useful Articles

Here’s a popular talk on Promises and Generators

Take Aways

  1. jQuery “promises” are not real promises and never will be due to backwards compatibility issues. reference:
var jQueryPromise = $.ajax('/data.json');
var realPromise = Promise.resolve(jQueryPromise);
//now just use `realPromise` however you like.
  1. The Promise API is incredibly important for any JavaScript programmers that will be dealing with asynchronous calls, which means probably every JS web developer. Thus, it’s worth spending some time on this.
  2. From We have a problem with promises:

Every promise gives you a then() method (or catch(), which is just sugar for then(null, …)). Here we are inside of a then() function:

somePromise().then(function () {
// I’m inside a then() function!
});

What can we do here? There are three things:

  1. return another promise
  2. return a synchronous value (or undefined)
  3. throw a synchronous error

What’s your favorite articles and videos on Promises and Generators?

2

I would like to point out how it will be with ES7:

1 Like
3

I think that the article We have a problem with promises is very good. I just fixed one of my promises to actually be a chained correctly. It is easy to verify by checking the stack in Chrome DevTools.

1 Like
4

This is a pretty neat bit of code on generators:

function spawn(generatorFunc) {
  function continuer(verb, arg) {
    var result;
    try {
      result = generator[verb](arg);
    } catch (err) {
      return Promise.reject(err);
    }
    if (result.done) {
      return result.value;
    } else {
      return Promise.resolve(result.value).then(onFulfilled, onRejected);
    }
  }
  var generator = generatorFunc();
  var onFulfilled = continuer.bind(continuer, "next");
  var onRejected = continuer.bind(continuer, "throw");
  return onFulfilled();
}

And the basis of ES7’s async/await:

5

Playing around with this es6fiddle really gave me a good understanding of async/await:

http://www.es6fiddle.net/ihdydgeu/

Play with the fiddle and study my annotated screen capture.

You’ll see how:

  1. Creating a function that can make async calls as if they were synchronous.
  2. Pass params into these async functions.
  3. Get back return values.
  4. Send back errors.

2015-11-24_14-28-32.png1428×779 301 KB

Here’s my full async/await example (from the es6fiddle):

var longFn = function(x) {
	return new Promise(function(res, rej) {
      if (x) {	
       setTimeout(res(x), 1000);
      } else {
       rej("ERROR from not passing in a value to longFn"); 
      }
	});
};

async function f(inputToAsync) {
  console.log("f() starting with param: ", inputToAsync);
  let result;
  try { 
    result = await longFn(inputToAsync);
  } catch (err) {
    console.log("THROWING err: " + err);
    throw err;
  }
  return "RETURN VALUE FROM ASYNC function: " + inputToAsync;
}

var p = f("INPUT TO ASYNC FUNCTION");
console.log("1: return value of async function is ", p);

p.then(
  res => console.log("1: FINISHED: got back: " + res)
).catch( 
  err => console.log("1: GOT ERROR: err")
);  
                     

var p = f(false);
console.log("2: return value of async function is ", p);

p.then(
  res => console.log("2: FINISHED: got back: " + res)
).catch( 
  err => console.log("2: GOT ERROR: err")
);