I am trying to do multiple $http call and my code looks something like this:
var data = ["data1","data2","data3"..."data10"];
for(var i=0;i<data.length;i++){
$http.get("http://example.com/"+data[i]).success(function(data){
console.log("success");
}).error(function(){
console.log("error");
});
}
How can I have the promise to know all $http call is successfull? If anyone of it fail, will perform some action.
You could also use $q.all() method.
So, from your code:
var data = ["data1","data2","data3"..."data10"];
for(var i=0;i<data.length;i++){
$http.get("http://example.com/"+data[i]).success(function(data){
console.log("success");
}).error(function(){
console.log("error");
});
}
You could do:
var promises = [];
data.forEach(function(d) {
promises.push($http.get('/example.com/' + d))
});
$q.all(promises).then(function(results){
results.forEach(function(data,status,headers,config){
console.log(data,status,headers,config);
})
}),
This above basically means execute whole requests and set the behaviour when all have got completed.
On previous comment:
Using status you could get to know if any have gone wrong. Also you could set up a different config for each request if needed (maybe timeouts, for example).
If anyone of it fail, will perform some action.
From docs which are also based on A+ specs:
$q.all(successCallback, errorCallback, notifyCallback);
If you are looking to break out on the first error then you need to make your for loop synchronous like here: Angular synchronous http loop to update progress bar
var data = ["data1", "data2", "data3", "data10"];
$scope.doneLoading = false;
var promise = $q.all(null);
angular.forEach(data, function(url){
promise = promise.then(function(){
return $http.get("http://example.com/" + data[i])
.then(function (response) {
$scope.data = response.data;
})
.catch(function (response) {
$scope.error = response.status;
});
});
});
promise.then(function(){
//This is run after all of your HTTP requests are done
$scope.doneLoading = true;
});
If you want it to be asynchronous then: How to bundle Angular $http.get() calls?
app.controller("AppCtrl", function ($scope, $http, $q) {
var data = ["data1", "data2", "data3", "data10"];
$q.all([
for(var i = 0;i < data.length;i++) {
$http.get("http://example.com/" + data[i])
.then(function (response) {
$scope.data= response.data;
})
.catch(function (response) {
console.error('dataerror', response.status, response.data);
break;
})
.finally(function () {
console.log("finally finished data");
});
}
]).
then(function (results) {
/* your logic here */
});
};
This article is pretty good as well: http://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/
Accepted answer is okay, but is still a bit ugly. You have an array of things you want to send.. instead of using a for loop, why not use Array.prototype.map?
var data = ["data1","data2","data3"..."data10"];
for(var i=0;i<data.length;i++){
$http.get("http://example.com/"+data[i]).success(function(data){
console.log("success");
}).error(function(){
console.log("error");
});
}
This becomes
var data = ['data1', 'data2', 'data3', ...., 'data10']
var promises = data.map(function(datum) {
return $http.get('http://example.com/' + datum)
})
var taskCompletion = $q.all(promises)
// Usually, you would want to return taskCompletion at this point,
// but for sake of example
taskCompletion.then(function(responses) {
responses.forEach(function(response) {
console.log(response)
})
})
This uses a higher order function so you don't have to use a for loop, looks a lot easier on the eyes as well. Otherwise, it behaves the same as the other examples posted, so this is a purely aesthetical change.
One word of warning on success vs error - success and error are more like callbacks and are warnings that you don't know how a promise works / aren't using it correctly. Promises then and catch will chain and return a new promise encapsulating the chain thus far, which is very beneficial. In addition, using success and error (anywhere else other than the call site of $http) is a smell, because it means you're relying explicitly on a Angular HTTP promise rather than any A+ compliant promise.
In other words, try not to use success/error - there is rarely a reason for them and they almost always indicate a code smell because they introduce side effects.
With regards to your comment:
I have did my own very simple experiment on $q.all. But it only trigger when all request is success. If one if it fail, nothing happen.
This is because the contract of all is that it either resolves if every promise was a success, or rejects if at least one was a failure.
Unfortunately, Angular's built in $q service only has all; if you want to have rejected promises not cause the resultant promise to reject, then you will need to use allSettled, which is present in most major promise libraries (like Bluebird and the original Q by kriskowal). The other alternative is to roll your own (but I would suggest Bluebird).
Related
i have two http GET in one controller and sometimes it works and two of them are working. sometime only one http Get is work. and sometimes none of them is shown.
any suggestions?
}).controller("nextSidorAdminCtrl",
function($scope,$rootScope,$http,$location,$state) {
$http.get("/ShiftWeb/rest/admin/getallsettingtime")
.then(function(response) {
$scope.settingtimes = response.data;
});
$http.get("/ShiftWeb/rest/admin/nextsidor")
.then(function(response) {
$scope.nextsidor = response.data;
});
Image:
https://prnt.sc/k5ewd6
Chain the two $http.get operations:
}).controller("nextSidorAdminCtrl",
function($scope,$rootScope,$http,$location,$state) {
$http.get("/ShiftWeb/rest/admin/getallsettingtime")
.then(function(response) {
$scope.settingtimes = response.data;
return $http.get("/ShiftWeb/rest/admin/nextsidor")
})
.then(function(response) {
$scope.nextsidor = response.data;
});
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.
For more information, see AngularJS $q Service API Reference - chaining promises
The best way to solve this problem is to use async
In my openion, The problem in Mr. georgeawg's answer is, if $http.get("/ShiftWeb/rest/admin/getallsettingtime") will return success then $http.get("/ShiftWeb/rest/admin/nextsidor") will be called, Otherwise It will not be called.
And as I can see in the question both are independent.
So you need to follow the best way which is used async or something like that.
So your code will be :
var getAllAettingTime = function(cb) {
$http.get("/ShiftWeb/rest/admin/getallsettingtime")
.then(function(response) {
if(response.data){
$scope.settingtimes = response.data;
return cb(null,'OK');
}else{
return cb(null,'ERROR');
})
}
var nextSidor= function(cb) {
$http.get("/ShiftWeb/rest/admin/nextsidor")
.then(function(response) {
if(response.data){
$scope.nextsidor = response.data;
return cb(null,'OK');
}else{
return cb(null,'ERROR');
})
}
async.series([ getAllAettingTime, nextSidor], function(err, result) {
if (err){
/* Do what you want if err comes */
} else {
/* Do what you want if both HTTP come with success */
}
});
In the above async.series() both HTTP will be called without any dependency on each other.
For better understanding, you need study about async npm module and have to install in your app.
I have a factory which is making 'n' number of $http request and to fulfill this I am using $q.all() , so let me show you my factory code.
app.factory('loadBooks',['$http','$q',function($http,$q){
var promises = [];
return {
getBooks : function(category,no){
for(var i =1; i<=no; i++){
var deferred = $q.defer();
console.log(i + 'request');
$http.get(`https://anapioficeandfire.com/api/${category}?page=${i}&pageSize=10`)
.then(function(response){
deferred.resolve(response);
console.log(response);
})
.catch(function(response){
deferred.reject(response);
})
promises.push(deferred);
}
return $q.all(promises);
}
}
}])
And this is my controller from where i am calling the factory function
app.controller('bookController',['$scope','loadBooks','$routeParams',function($scope,loadBooks,$routeParams){
$scope.count = $routeParams.no;
loadBooks.getBooks('books',2).then(function(data){
$scope.books = data;
})
.catch(function(response){
});
}]);
Now the problem is I am making 2 request from the getBooks method and the api is sending me data for both the request but for some reason the first request pushes no data inside the promise array but the second does. I dont know what i am doing wrong. The api is working fine because I can see the data coming in my network tab but data from first request is not getting pushed inside the promise array!
I would be thankful if you could tell me what the problem is. Btw I am new to $q.
You've fallen prey to an insidious bug called "closing over the loop variable". The value of the deferred variable changes in every iteration of the loop, so when this eventually executes:
deferred.resolve(response);
deferred is referring to the last value that the deferred variable took on.
On top of that, you're using the Explicit Promise Creation Antipattern, an antipattern that causes your promise code to be unnecessarily convoluted and error prone.
Solve both problems by using promises the way they're supposed to be used:
app.factory('loadBooks', ['$http', '$q', function($http, $q) {
return {
getBooks: function(category, no) {
var promises = [];
for (var i = 1; i <= no; i++) {
console.log(i + 'request');
promises.push(
$http.get(`https://anapioficeandfire.com/api/${category}?page=${i}&pageSize=10`)
);
}
return $q.all(promises);
}
}
}])
I am trying to use an Angular service to make a call to either use fs.readFile or fs.writeFile depending on type of button pressed in order to understand how node and angular promises interact. What I have is reading writing files, but does not send back read data, nor does it throw any errors for me to understand what has gone wrong.
//HTML
<button ng-click="rw('write')">WRITE FILE</button>
<button ng-click="rw('read')">READ FILE</button>
//angular
angular.module('test', [])
.controller('ctrl', function($scope, RWService){
$scope.rw = function(type){
RWService.rw(type)
.then(
function(res){
console.log('success');
},
function(err){
console.log('error');
})
};
})
.service('RWService',['$http', '$q', function($http, $q){
this.rw = function(type){
var promise = $http.get('./rw/' + type);
var dfd = $q.defer();
promise.then(
function(successResponse){
dfd.resolve(successResponse);
},
function(errorResponse){
dfd.reject(errorResponse);
}
);
return dfd.promise;
};
}]);
//node
var fs = require('fs')
, async = require('async')
, Q = require('Q');
var dest = './file.txt';
var rw = {
write: function(data){
data = data.repeat(5);
return Q.nfcall(fs.writeFile, dest, data);
}
, read: function(data){
data = data.repeat(5);
var deferred = Q.defer();
console.log('inside read');
fs.readFile(dest, 'utf8', function(err, data){
if (err){
deferred.reject('some error');
}else{
deferred.resolve(data);
}
});
return deferred.promise;
}
};
module.exports = exports = rw;
//node server
app.get('/rw/:type', function(req, res, next){
var type = req.params.type;
var data = 'some text string\n';
if (type == 'write'){
//omitted fro brevity
}else{
rw.read(data)
.then(function(response){
return {'response': response};
})
.catch(function(err){
return {'index.js error': err};
});
}
});
I structured the angular $q portion off of this blog post.
Here is a native Promise implementation of your code.
var fs = require('fs');
var dest = './file.txt';
var rw = {
write: function(data){
return new Promise(function (resolve, reject) {
data = data.repeat(5);
fs.writeFile(function (err, result) {
if (err) return reject(err.message);
return resolve(result);
});
});
},
read: function(data){
return new Promise(function (resolve, reject) {
data = data.repeat(5);
fs.readFile(dest, 'utf8', function(err, contents) {
if (err) return reject(err.message);
return resolve(contents.toString());
});
});
}
};
module.exports = exports = rw;
[edit: I just changed the code to put data=data.repeat(5) inside the promise factory method. Basically, if anything CAN raise an exception, you should try to put it inside that promise function, or you again run the risk of silently killing the script again.]
A couple of comments:
Returning deferred is incredibly useful, but you have to be careful about how you use it. I personally only use it if the asynchronous code cannot be wrapped in a simple function (such as a class instance that creates a promise in its constructor and resolves/rejects in different child methods). In your case, probably what is happening is that the script is failing in a way that fs.readFile() never gets called -- and so deferred.resolve() and deferred.reject() will never be reached. In cases like this, you need to use try/catch and always call deferred.reject() in there as well. It is a lot of extra work that is easily avoided.
Instead, you should try to use the vanilla standard implementation of Promises as you see above.
Lastly, Q was a groundbreaking library that basically taught the world how to do promises in the first place, but it has not been updated in years and was never particularly feature-rich or fast. If you need more features, take a look at when.js*, kew or Bluebird (note that Bluebird claims to be the fastest, but I've personally found that to be untrue.)
(*I actually loved working with when.js and find it a bit painful using dumb native promises, but hey, standards are standards.)
[edit: Adding details on the Angular side of things]
So based on your comment, here is what I suspect you are also looking for. You will see that here I am using $http.get() as the only promise. No need to use defer() once you are inside a promise, so actually there is no need to even include $q.
I'm sorry, I've never used service(). Even Angular's own documentation on creating services uses the factory() method, so that's what I'm using here.
.factory('RWService',['$http', function($http){
return {
rw: function (type) {
// $http returns a promise. No need to create a new one.
return $http.get('./rw/' + type)
.then(function (response) {
// You can do other stuff here. Here, I am returning the
// contents of the response. You could do other stuff as
// well. But you could also just omit this `then()` and
// it would be the same as returning just the response.
return response.data;
})
.catch(function (err) {
// You can do other stuff here to handle the error.
// Here I am rethrowing the error, which is exactly the
// same as not having a catch() statement at all.
throw err;
});
}
};
}]);
If you read the comments in the code above, you should realize that you can write the same code like this:
.factory('RWService',['$http', function($http){
return {
rw: function (type) {
return $http.get('./rw/' + type);
}
};
});
The only difference here is that RWService.rw() will eventually resolve the entire response object rather than the response data.
The thing to keep in mind here is that you can (and absolutely should) try to recycle your promises as much as possible. Basically, all you need to know about promises is:
every promise has a then and catch method you can wrap your logic in;
every then and catch return as a new promise;
if you throw an exception inside any then or catch, you will be thrown straight to the next catch, if there is one;
if you return a value from any then or catch, it will be passed as the argument to the very next then in the chain;
when the chain runs out of thens or you throw an exception and there are no more catches, the promise chain ends; and
then and catch are fast, but they are still asynchronous, so don't add new elements to a promise chain if you don't genuinely need them.
I am still learning promises in angular and have this bit of code where I am making a "GET" request two times. I want to run one get request before calling the other. This is working fine, but how would I handle errors here? If I get an error for my first GET request how do I find out what that error is and prevent my code from calling the second GET request? Examples with my code would be most helpful.
apiServices.login = function(user,password,callback) {
$http.get("http://magainteractive.com/prototypes/cisco-ima-dashboard/cms/web/api/login/login/?username="+user+"&password="+password+"")
.then(function(contentResponse){
resultsObject.content = contentResponse;
return $http.get("http://magainteractive.com/prototypes/cisco-ima-dashboard/cms/web/api/data/list/");
})
.then(function(dataResponse){
resultsObject.reports = dataResponse;
resultsObject.success = 1;
console.log(resultsObject);
callback(resultsObject);
apiServices.useData(resultsObject);
});
}
dummyData.login(username, password, function (dataStatus) {
if (dataStatus.success = 1) {
$rootScope.loggedIn = true;
$rootScope.selectedDashboard = 1;
} else {
console.log("Error");
}
});
I would do things slightly different from Lucas, I prefer chaining a catch block( basically it would act like the synchrounous try...catch block we use) rather than adding an error callback function so code would be like:
return $http.get(url1)
.then(function(result){
resultsObject.url1 = result;
return $http.get(url2);
}).then(function(result){
resultsObject.url2 = result;
return resultsObject;
}).catch(function(error){
// handle error.
});
P.S: most of your code is fine, but I am not really sure why you have that callback(resultsObject);, when you are using promises, callbacks are redundant, you could just return the promise chain $http.get...
You can pass a second parameter in the first callback handling. This will trigger if there's an error in the request, then you can handle it however you want:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Or in your coding:
$http.get('/someUrl').then(successCallback, errorCallback);
More information here
Your code would look like:
$http.get("http://magainteractive.com/prototypes/cisco-ima-dashboard/cms/web/api/login/login/?username="+user+"&password="+password+"")
.then(function(contentResponse){
resultsObject.content = contentResponse;
return $http.get("http://magainteractive.com/prototypes/cisco-ima-dashboard/cms/web/api/data/list/");
}, function(error){
//HANDLE ERROR HERE
})
.then(function(dataResponse){
resultsObject.reports = dataResponse;
resultsObject.success = 1;
console.log(resultsObject);
callback(resultsObject);
apiServices.useData(resultsObject);
});
What happens with $q.all() when some calls work and others fail?
I have the following code:
var entityIdColumn = $scope.entityType.toLowerCase() + 'Id';
var requests = $scope.grid.data
.filter(function (rowData, i) {
return !angular.equals(rowData, $scope.grid.backup[i]);
})
.map(function (rowData, i) {
var entityId = rowData[entityIdColumn];
return $http.put('/api/' + $scope.entityType + '/' + entityId, rowData);
});
$q.all(requests).then(function (allResponses) {
//if all the requests succeeded, this will be called, and $q.all will get an
//array of all their responses.
console.log(allResponses[0].data);
}, function (error) {
//This will be called if $q.all finds any of the requests erroring.
var abc = error;
var def = 99;
});
When all of the $http calls work then the allResponses array is filled with data.
When one fails the it's my understanding that the second function will be called and the error variable given details.
However can someone help explain to me what happens if some of the responses work and others fail?
I believe since the promise library is based on Q implementation, as soon as the first promise gets rejected, the reject callback is called with the error. It does not wait for other promises to resolved. See documentation of Q https://github.com/kriskowal/q. For Q.all this is what is mentioned
The all function returns a promise for an array of values. When this
promise is fulfilled, the array contains the fulfillment values of the
original promises, in the same order as those promises. If one of the
given promises is rejected, the returned promise is immediately
rejected, not waiting for the rest of the batch.
It's been a while since this question was posted, but maybe my answer might still help someone. I solved a similar problem on my end by simply resolving all promises, but with a return I could process later and see if there were any errors. Here's my example used to preload some image assets:
var loadImg = function(imageSrc) {
var deferred = $q.defer();
var img = new Image();
img.onload = function() {
deferred.resolve({
success: true,
imgUrl: imageSrc
});
};
img.onerror = img.onabort = function() {
deferred.resolve({
success: false,
imgUrl: imageSrc
});
};
img.src = imageSrc;
return deferred.promise;
}
Later I can see which ones are errorious:
var promiseList = [];
for (var i = 0; i < myImageList.length; i++) {
promiseList[i] = loadImg(myImageList[i]);
}
$q.all(promiseList).then(
function(results) {
for (var i = 0; i < results.length; i++) {
if (!results[i].success) {
// these are errors
}
}
}
);
Edit: Only supported in Kris Kowal's Q - but still a useful tidbit
If you want to process all of them without rejecting right away on failure use allSettled
Here's what the docs say:
If you want to wait for all of the promises to either be fulfilled or
rejected, you can use allSettled.
Q.allSettled(promises)
.then(function (results) {
results.forEach(function (result) {
if (result.state === "fulfilled") {
var value = result.value;
} else {
var reason = result.reason;
}
});
});
Here is a small answer to it.
In this fiddle you can see how it works, if an error occurs in some promise.
$q.all([test1(), test2()]).then(function() {
// success
}, function() {
// error
});
http://jsfiddle.net/wd9w0ja4/
I've found a new angular package which add the allSettled functionality to $q in angular:
https://github.com/ohjames/angular-promise-extras
In my case I needed to know when last promise has been resolved no matter if successful or fail. $q.all was not an option because if one fails it goes down immediately. I needed this to make sure user will be redirected no matter what but only if all data are processed (or not) so they can be loaded on next page. So I ended up with this:
Each promise/call implemented also fail callback where "redirect" function is called in both success and fail callbacks.
In this function counter is set, which is increased with each call. If this reaches the number of promises/calls, redirect to next view is made.
I know it's quite a lame way to do it but it worked for me.
Could you not simply handle the error condition on your $http promises before passing them to $q? Promises are chained, so this should work:
return $http.put('/api/' + $scope.entityType + '/' + entityId, rowData).then(function(r){return r;}, angular.noop);
Obviously you could change the noop into any transformation you want but this prevents the rejection which prevents $q.all from failing.