I am sure you have heard about the javascript Promises Pattern, but if you haven’t, here is a quick and simple definition: a promise or future is an object that represents a future result, not yet obtained or calculated (here you have a more complete definition). In fact, what is really nice about it is that allows you to define callbacks for async code in and more elegant and readable way.

But wait a moment, what’s the problem with the actual callbacks system? Well, they work, but they become a big mess when you try to chain two or more of them, resulting in a code looking like a pyramid. Let’ see an example.

Suppose you have several async operations: operation1, operation2 and operation3 and they must be execute in strict sequence, that is, operation 2 must wait for operation1 to finish and so on. The resulting code will look like something like this:

operation1(params1) {
  async_task(params1, function() {
    operation2(params2) {
      async_task(params2, function() {
        operation3(params3) {
          async_task(params3, function() {
            // here we have the results of the three operations
          }
        }
      }
    }
  }
}

This code is, at least, hard to follow and thus to understand (and in my opinion quite ugly), but it has been the common way to deal with asynchronism in javascript… until now. Look how the same code would look like using Promise Pattern:

function operation1(params1) {
  var promise = new Promise()
  async_task(params1, function() {
    // ...
    promise.resolve(params2);
  });
  return promise;
}

function operation2(params2) {
  var promise = new Promise(this)
  async_task(params2, function() {
    // ...
    promise.resolve(params3);
  });
  return promise;
}

function operation3(params3) {
  var promise = new Promise(this)
  async_task(params3, function() {
    // ...
    promise.resolve(allResults);
  });
  return promise;
}

function processResults(allResults) {
  // ...
}
operation1(params1).then(operation2).then(operation3).then(processResults);

Here you can clearly see that there are three different operations, that don’t appear to be tight one to another. The chainability of the three functions is established in the last line of code, making it clear with a glimpse that every operations depends on the result of the previous one, and thus, they must be executed in strict order. This line is the key of the Promise Pattern and it works because every operation return a promise object. We’ll deep into this in further posts.

This code can be heavy refactored, but I prefer to keep it like this to make it easy to understand how promises work. Anyway, I think you will agree with me that this code is much elegant and easy to understand than the previous one.

So far, so good. In further posts I will show you how to easily implement this pattern in plain javascript, and we will deep into the tricks that promises use to make this code work. By the moment enjoy using the implementations provided by the main javascript libraries (much more powerfull than the one we will create) like jQuery’s deferreds (they are the same concept as promises).

See you in following posts!