How do I sequentially chain promises with angularjs $q? How do I sequentially chain promises with angularjs $q? angularjs angularjs

How do I sequentially chain promises with angularjs $q?


Redgeoff, your own answer is the way I used to translate an array into a chained series of promises.

The emergent de facto pattern is as follows :

function doAsyncSeries(arr) {    return arr.reduce(function (promise, item) {      return promise.then(function(result) {        return doSomethingAsync(result, item);      });    }, $q.when(initialValue));}//thenvar items = ['x', 'y', 'z'];doAsyncSeries(items).then(...);

Notes:

  • .reduce is raw javascript, not part of a library.
  • result is the previous async result/data and is included for completeness. The initial result is initialValue. If it's not necessary to pass `result, then simply leave it out.
  • adapt $q.when(initialValue) depending on which promise lib you use.
  • in your case, doSomethingAsync is foo (or what foo() returns?) - in any case, a function.

If you are like me, then the pattern will look, at first sight, like an impenetrable cludge but once your eye becomes attuned, you will start to regard it as an old friend.

Edit

Here's a demo, designed to demonstrate that the pattern recommended above does in fact execute its doSomethingAsync() calls sequentially, not immediately while building the chain as suggested in the comments below.


Simply use the $q.when() function:

var items = ['one', 'two', 'three'];var chain = $q.when();items.forEach(function (el) {  chain = chain.then(foo(el));});return chain;

Note: foo must be a factory, e.g.

function setTimeoutPromise(ms) {  var defer = $q.defer();  setTimeout(defer.resolve, ms);  return defer.promise;}function foo(item, ms) {  return function() {    return setTimeoutPromise(ms).then(function () {      console.log(item);    });  };}var items = ['one', 'two', 'three'];var chain = $q.when();items.forEach(function (el, i) {  chain = chain.then(foo(el, (items.length - i)*1000));});return chain;


In perhaps a simpler manner than redgeoff's answer, if you don't need it automated, you can chain promises using $q.when() combined with .then() as shown in the beginning of this post. return $q.when() .then(function(){ return promise1; }) .then(function(){ return promise2; });