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;
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;
chain.then or $q.all(chain).then seem not to work –
Chloromycetin chain.then(function () { console.log('all resolved'); }); –
Mercie 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 initial result is initialValue. If it's not necessary to pass `result, then simply leave it out.$q.when(initialValue) depending on which promise lib you use.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.
initialValue appears as result in the first iteration of the reduce() loop. It's value depends on the application. If doSomethingAsync() does not need the previous result passed to it, then the reduction initializer would simplify to $q.when() –
Aristocrat doSomethingAsync() calls are not simultaneous. The reduce(...) process builds a .then() chain immediately, but its execution is sequential in exactly the same way as writing out doSomethingAsync(...).then(...).then(...) longhand. –
Aristocrat net::ERR_INSUFFICIENT_RESOURCES some 2 minutes into it so I wonder why that would happen even when I'm using this to throttle execution to be serial rather than parallel. –
Vassell 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;
chain.then or $q.all(chain).then seem not to work –
Chloromycetin chain.then(function () { console.log('all resolved'); }); –
Mercie var when = $q.when();
for(var i = 0; i < 10; i++){
(function() {
chain = when.then(function() {
return $http.get('/data');
});
})(i);
}
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; });
Having this:
let items = ['one', 'two', 'three'];
One line (well, 3 for readability):
return items
.map(item => foo.bind(null, item))
.reduce($q.when, $q.resolve());
I prefer preparing functions that will return promises using angular.bind (or Function.prototype.bind) and then linking them into a chain using reduce shortcut. For example
// getNumber resolves with given number
var get2 = getNumber.bind(null, 2);
var get3 = getNumber.bind(null, 3);
[get2, get3].reduce(function (chain, fn) {
return chain.then(fn);
}, $q.when())
.then(function (value) {
console.log('chain value =', value);
}).done();
// prints 3 (the last value)
angular.bind in this scenario? –
Vassell .then(foo).then(bar) –
Outsize Your answer is correct. However, I thought I'd provide an alternative. You may be interested in $q.serial if you find yourself serially chaining promises often.
var items = ['one', 'two', 'three'];
var tasks = items.map(function (el) {
return function () { foo(el, (items.length - i)*1000)); });
});
$q.serial(tasks);
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);
});
};
}
© 2022 - 2024 — McMap. All rights reserved.