Friday, September 14, 2012

JavaScript - Promises, Promises

Now that the web development field is shifting more and more to the client, asynchronous calls in JavaScript are becoming more and more frequent. Many times recently, I've seen scenarios where there are callbacks of callbacks of callbacks in order to load multiple items, which are often independent of one another, prior to some other code executing. I like to call this code "The Flying V".

FLYING V!!!

$.ajax(options)
   .success(function(x) {
      $.get(url, function(y) {
         $.post(url, data, function(z){ 
            doSomethingHere();
         });
      });
   });

What's going on in this scenario is pretty common: There is a bunch of data needing to be loaded, and/or other asynchronous tasks, and the author isn't quite sure what to do to have something fire only when it's all done.

Promises to the rescue. Believe it or not, most popular JavaScript libraries already implement a Promise pattern: JQuery does and so does AngularJS. So if you're using one of these you're in luck, all you need to do is leverage a little known feature of your favorite library.

Here is an example of Promises in JQuery:

$.when(
  $.ajax(options),
  $.get(url),
  $.post(url, data)
).then(function() {
  doSomethingHere();
});

But what if you don't have access to this? What if you're using the best library ever: Vanilla JS? Well, then you can roll your own, or use this simple promise code I put together. I put it up on GitHub, so use it, fork it, blame it, whatever. It's a pretty small amount of code ~480 bytes minified.

Simple promise


Here's a sample of it being used:




This is an extremely simplistic implementation. There are more robust and mature implementations out there. Kris Kowal's Q is a great example of this. It's my understanding that his work is what AngularJS based their promise system off of. I'm sure Mr. Kowal would probably find my simple implementation laughable, but it's made to be lightweight and do one thing.