Queuing promises

Question

I use mbostock/queue for queuing few async operation. It is more to rate limit (UI generate few events, where the backend can process it slowly), and also to make sure they are processed sequentially. I use it like

function request(d, cb) {
 //some async oper
 add.then(function(){
   cb(null, "finished ")
 })
}

var addQ = queue(1);
addQ.defer(request) //called by few req at higher rates generated by UI

I already uses angular.js $q for async operation. So, do I have to use mbostock/queue, or can I build a queue out of $q (which is in spirit https://github.com/kriskowal/q)

Thanks.

Solution 1

Basic $q Chain Example

Yes you can build a chained queue using Angular's $q! Here is an example that shows you how you could use recursion to create a queue of any length. Each post happens in succession (one after another). The second post will not start until the first post has finished.

This can be helpful when writing to databases. If the database does not have it's own queue on the backend, and you make multiple writes at the same time, you may find that not all of your data is saved!

I have added a Plunkr example to demonstrate this code in action.

$scope.setData = function (data) {

  // This array will hold the n-length queue
  var promiseStack = [];

  // Create a new promise (don't fire it yet)
  function newPromise (key, data) {
    return function () {
      var deferred = $q.defer();

      var postData = {};
      postData[key] = data;

      // Post the the data ($http returns a promise)
      $http.post($scope.postPath, postData)
      .then(function (response) {

        // When the $http promise resolves, we also
        // resolve the queued promise that contains it
        deferred.resolve(response);

      }, function (reason) {
        deferred.reject(reason);
      });

      return deferred.promise;
    };
  }

  // Loop through data creating our queue of promises
  for (var key in data) {
    promiseStack.push(newPromise(key, data[key]));
  }

  // Fire the first promise in the queue
  var fire = function () {

    // If the queue has remaining items...
    return promiseStack.length && 

    // Remove the first promise from the array
    // and execute it 
    promiseStack.shift()()

    // When that promise resolves, fire the next
    // promise in our queue 
    .then(function () {
      return fire();
    });
  };

  // Begin the queue
  return fire();
};

You can use a simple function to begin your queue. For the sake of this demonstration, I am passing an object full of keys to a function that will split these keys into individual posts, then POST them to Henry's HTTP Post Dumping Server. (Thanks Henry!)

$scope.beginQueue = function () {

  $scope.setData({
    a: 0,
    b: 1,
    /* ... all the other letters of the alphabet ... */
    y: 24,
    z: 25

  }).then(function () {

    console.log('Everything was saved!');

  }).catch(function (reason) {
    console.warn(reason);
  });
};

Here is a link to the Plunkr example if you would like to try out this code.

Solution 2

The short answer is no, you don't need an extra library. Promise.then() is sufficiently "atomic". The long answer is: it's worth making a queue() function to keep code DRY. Bluebird-promises seems pretty complete, but here's something based on AngularJS's $q.

If I was making .queue() I'd want it to handle errors as well.

Here's an angular service factory, and some use cases:

/**
 * Simple promise factory
 */

angular.module('app').factory('P', function($q) {
  var P = $q;

  // Make a promise
  P.then = function(obj) {
    return $q.when(obj);
  };

  // Take a promise.  Queue 'action'.  On 'action' faulure, run 'error' and continue.
  P.queue = function(promise, action, error) {
    return promise.then(action).catch(error);
  };

  // Oook!  Monkey patch .queue() onto a $q promise.
  P.startQueue = function(obj) {
    var promise = $q.when(obj);
    promise.queue = function(action, error) {
      return promise.then(action).catch(error);
    };
    return promise;
  };

  return P;
});

How to use it:

.run(function($state, YouReallyNeedJustQorP, $q, P) {

  // Use a $q promise.  Queue actions with P

  // Make a regular old promise
  var myPromise = $q.when('plain old promise');

  // use P to queue an action on myPromise
  P.queue(myPromise, function() { return console.log('myPromise: do something clever'); });

  // use P to queue an action
  P.queue(myPromise, function() {
    throw console.log('myPromise: do something dangerous');
  }, function() { 
    return console.log('myPromise: risks must be taken!');
  });
  // use P to queue an action
  P.queue(myPromise, function() { return console.log('myPromise: never quit'); });


  // Same thing, but make a special promise with P

  var myQueue = P.startQueue(myPromise);

  // use P to queue an action
  myQueue.queue(function() { return console.log('myQueue: do something clever'); });

  // use P to queue an action
  myQueue.queue(function() {
    throw console.log('myQueue: do something hard');
  }, function() { 
    return console.log('myQueue: hard is interesting!');
  });
  // use P to queue an action
  myQueue.queue(function() { return console.log('myQueue: no easy days'); });

Comments

[Brian Vanderbusch]

my "smaller" demonstration is quickly evolving into a tutorial/sample app on promise based architecture.

[Brian Vanderbusch]

Sorry, it wasn't at the time. It was before egghead had a pro plan I think.

[Maxim]

I think it is not good to public video on site requiring registration and paid Pro account.

[Brian Vanderbusch]

it wasn't paid content when I left this answer 3 years ago. But thanks for the downvote anyways!