How to make foreach loop synchronous in AngularJS
var articles = arg;
articles.forEach(function(data){
var promises = [fetchImg(data), fetchUser(data)];
$q.all(promises).then(function (res) {
finalData.push(res[1]);
});
});
return finalData;
I want finalData
array to be returned only after the forEach
loop gets over. Is there any way to chain it with promises? Something that will execute the foreach loop first and then return the array after the loop is over?
How to make foreach loop synchronous in AngularJS
var articles = arg;
articles.forEach(function(data){
var promises = [fetchImg(data), fetchUser(data)];
$q.all(promises).then(function (res) {
finalData.push(res[1]);
});
});
return finalData;
I want finalData
array to be returned only after the forEach
loop gets over. Is there any way to chain it with promises? Something that will execute the foreach loop first and then return the array after the loop is over?
-
You seem to know about
$q.all
already. Why don't you use it? – Bergi Commented Mar 27, 2016 at 21:38
2 Answers
Reset to default 4Chaining promises from a foreach loop
Promises are chained by returning values (or a promise) to the handler function in the .then
method. Multiple promises are consolidated by using $q.all
which itself returns a chainable promise.
function fetchUsers(arg) {
var articles = arg;
var promises = articles.map(function(a){
var subPromises = [fetchImg(a), fetchUser(a)];
return $q.all(subPromises).then(function (res) {
//return for chaining
return {img: res[0], user: res[1]};
});
});
//consolidate promises
var finalPromise = $q.all(promises);
return finalPromise;
};
Because calling the .then
method of a promise returns a new derived promise, it is easily possible to create a chain of promises. It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain.1
The returned promise will either resolve fulfilled with an array of users or will resolve rejected with the first error. Final resolution is retrieved with the promise's .then
and .catch
methods.
fetchUsers(args)
.then ( function onFulfilled(objArray) {
$scope.users = objArray.map(x => x.user);
return objArray;
}).catch ( function onRejected(response) {
console.log("ERROR: ", response);
throw response
})
;
The $q.defer
Anti-pattern
The problem with using $q.defer()
is that it breaks the promise chain, loses error information, and can create memory leaks when errors are not handled properly. For more information on that see, AngularJS Is this a “Deferred Antipattern”?.
You can modify your code like this:
function fetArticles(arg) {
var articles = arg;
var promises = [], finalData = [];
var deferred = $q.defer();
articles.forEach(function(data) {
var userPromise = fetchUser(data);
userPromise.then(function (res) {
finalData.push(res[1]);
});
promises.push(fetchImg(data));
promises.push(userPrommise);
});
$q.all(promises).then(function() {
deferred.resolve({finalData: finalData, foo: "bar"});
});
return deferred.promise;
}
Now, call this method and register a final callback:
fetArticles(arg).then(function(data) {
console.log("finalData: ", data.finalData, data.foo === "bar");
});