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.