How do I sequentially chain promises with angularjs $q?
In the promise library Q, you can do the following to sequentially chain promises:
var items = ['one', 'two', 'three'];
var chain = Q();
items.forEach(function (el) {
chain = chain.then(foo(el));
});
return chain;
however, the following doesn't work with $q:
var items = ['one', 'two', 'three'];
var chain = $q();
items.forEach(function (el) {
chain = chain.then(foo(el));
});
return chain;
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));
}
//then
var 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 initialresult
isinitialValue
. 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
isfoo
(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;