JSOM: Limit calls to SP.ClientContext executeQueryAsync with promises (Angular example)

Question

I have asked myself this question several times before:

Is it possible to have a JavaScript function used multiple times from multiple locations returning a promise calling ctx.executeQueryAsync, but only doing a single request to server from browser?

This is not the same as just wrapping executeQueryAsync in a promise, as that would possibly result in multiple requests to server.
It is also the opposite of a normal Q.all-function which waits for several promises to finish. Instead I want to wait for one single promise to finish then call out to a random amount of "listeners".

The reason I post an answer to my own question is because I haven't seen it come up before, and I find it really neat and a nice-to have solution which I want to share.

Answer 1

My starting point is to have one shared instance of SP.ClientContext. I'm going to augment the object instance so using new keyword is preferable:

var ctx = new SP.ClientContext();

The basic theory is to create a method execThen returning a promise, called when executeQueryAsync finishes, but only once for each "listener".
Something like this:

Usage

ctx.load(ctx.get_web());

ctx.execThen().then(function() {
  console.log(ctx.get_web());
});

ctx.load(ctx.get_site());

ctx.execThen().then(function() {
  console.log(ctx.get_site());
});

The code above will issue one single call to executeQueryAsync, even though execThen is called twice (in separate locations, could be separate files). If a new execThen was made inside of another execThen there would be a new call to executeQueryAsync, e.g.,

ctx.execThen().then(ctx.execThen);

Any promise-based library should support this, such as jQuery, Angular or Q.
As an example; here is my current implementation in Angular:

Angular example

ctx.execThen = (function () {
  var q;
  return function () {
    if (!q) {
      q = $q.when().then(function () {
        return $q(function (resolve, reject) {
          ctx.executeQueryAsync(resolve, reject);
        }).then(function () {
          q = null;
        });
      });
    }
    return q;
  };
})();