AngularJS + $q, Do something after multiple ajax calls have finished
Solution 1
I've made a working plunker for you with use of $q.all()
http://plnkr.co/edit/JHd3XPTKBxx4KRso5JRB?p=preview
$q.all([
$http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').then(function(response) {
$scope.ip.one = response.data
console.log('one')
}),
$http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').then(function(response) {
$scope.ip.two = response.data
console.log('two')
}),
$http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').then(function(response) {
$scope.ip.three = response.data
console.log('three')
}),
$http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').then(function(response) {
$scope.ip.four = response.data
console.log('four')
}),
]).then(function() {
console.log('all')
})
Solution 2
You have two solutions :
You want to use
$q.all()
in order to wait for multiple promise to resolve. Example : http://jsfiddle.net/ThomasBurleson/QqKuk/Use the
resolve
mecanism of routeProvider in order to pre-load promise before rendering your screen : https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Christos Baziotis
Updated on July 28, 2022Comments
-
Christos Baziotis almost 2 years
I need to load some data on page load and then do execute a task. in order to get the data i want i execute multiple different ajax calls. But in order to execute the task, i need all to make sure that all the ajax calls have finished. Here is what i have done so far:
$q.when( $http.get('url1').success(function (data) { $scope.data1 = data; console.log("ajax1 finished"); }), $http.get('url2').success(function (data) { $scope.data2 = data; console.log("ajax2 finished"); }), $http.get('url3').success(function (data) { $scope.data3 = data; console.log("ajax3 finished"); }), $http.get('url4').success(function (data) { $scope.data4 = data; console.log("ajax4 finished"); }) ).then( console.log("All ajax calls have finished!"), executeTask() );
My problem is that the code in block
then(...);
is not executed after all the ajax call have finished. I get something like this in my console:ajax2 finished ajax1 finished All ajax calls have finished! ajax3 finished ajax4 finished
I must be doing something wrong. How can i make it work the way i want?
Edit: I tried the following like it was mentioned in the answers but i still face the same problem.
$q.all([ $http.get('url1').then(function (data) { $scope.data1 = data; console.log(""); }), $http.get('url2').success(function (data) { $scope.data2 = then; console.log("ajax2 finished"); }), $http.get('url3').then(function (data) { $scope.data3 = data; console.log("ajax3 finished"); }), $http.get('url4').then(function (data) { $scope.data4 = data; console.log("ajax4 finished"); }) ]).then( console.log(""), executeTask() );