Develop Reference

How to wait until 2 $http requests end in angularjs

I need to process responses of two different $http requests. What is the best way to do so, knowing that I have to wait for answers of both request before to process their results.
I think I must use something like async, promise, await features, but I cannot figure out how to do so.
var app = angular.module('Async', []);
app.controller('async', function($scope, $http, $timeout, $interval) {
$scope.getCamionTypes = function() {
$http.get("../services/getCamionTypes.php")
.then(function mySucces(response) {
$scope.camionTypes = response.data;
}, function myError(response) {
camionTypes = [];
});
} ;
$scope.getParametres = function() {
var b = $http.get("../services/getParametres.php")
.then(function mySucces(response) {
$scope.parametres = response.data;
}, function myError(response) {
$scope.parametres = [];
});
}
//I make here the first call
$scope.getCamionTypes();
//I make here the second call
$scope.getParametres();
//The following instruction must wait for the end of the 2 calls
console.log('Types de camion : ' + $scope.camionTypes + '\n' + 'Parametres : ' + $scope.parametres);
})

check this
let promise1 = $http.get("../services/getParametres.php");
let promise2 = $http.get("../services/getParametres.php");
$q.all([promise1, promise2]).then(result=>{
//console.log('Both promises have resolved', result);
})

Use Promise.all for such use cases. Promise.all takes an array of promises and gets resolved when both the promises are resolved. It will fail if any of the promises fail.
$scope.getCamionTypes = function() {
return $http.get("../services/getCamionTypes.php")
} ;
$scope.getParametres = function() {
return $http.get("../services/getParametres.php")
}
Promise.all([$scope.getCamionTypes(), $scope.getParametres()]).then(resp => {
//resp[0] and resp[1] will contain data from two calls.
//do all your stuff here
}).catch()

Thank you very much Samira and Shubham for your usefull help !
Here the code modified thank to your advises with the less impact on the architecture of my application.
Best regards.
var app = angular.module('Async', []);
app.controller('async', function($scope, $http, $timeout, $interval, $q) {
$scope.getCamionTypes = function() {
let promise = $http.get("https://www.alphox.fr/ModulPierres_dev/services/getCamionTypes.php")
promise.then(function mySucces(response) {
$scope.camionTypes = response.data;
}, function myError(response) {
camionTypes = [];
});
return promise;
} ;
$scope.getParametres = function() {
let promise = $http.get("https://www.alphox.fr/ModulPierres_dev/services/getParametres.php")
promise.then(function mySucces(response) {
$scope.parametres = response.data;
}, function myError(response) {
$scope.parametres = [];
});
return promise;
}
//I make here the first call
let promise1 = $scope.getCamionTypes();
//I make here the second call
let promise2 = $scope.getParametres();
$q.all([promise1, promise2]).then (result=>{
//The following instructions wait for the end of the 2 calls
console.log('Types de camion : ');
console.log($scope.camionTypes);
console.log('Parametres : ');
console.log($scope.parametres);
$scope.both = {camionTypes: $scope.camionTypes, parametres: $scope.parametres}
});
});

How to abort/cancel promise for first call during 2 consecutive angular service calls?

When 2 consecutive service calls are made through $http angular service on dropdown item selection and assume first call took time to return and second call return before first call resolve then it shows data of first call for second item selection.
So is there any way to abort first promise if service call made again before first call resolves.
For demo purpose I created sample plunkar which has dropdown with few items I added explicit condition where on selection of first item it took little longer time then other items.
So select first item and immediately select second item to reproduce the scenario, check favorite books display on screen.
Any help appreciated!
Service code:
app.factory('bookService', function($http, $q, $timeout) {
return {
getBook: function(id) {
var promise = $q.defer();
var timeoutSpan = id == 1 ? 3000 : 500;
$http.get("favouriteBooks.json").success(function(data) {
$timeout(function() {
promise.resolve(data.filter(function(obj) {
return obj.id == id
}));
}, timeoutSpan);
}).error(function(msg) {
promise.reject(msg);
})
return promise.promise;
}
}
});

I found 2 ways to handle this scenario -
Case 1: Create global $q deffer object at service level and check whether this object has value/or not before making call to $http request. If this deffer object has value then resolved it explicitly. Plunkar code - code snippet
Service Code:
app.factory('bookService', function($http, $q, $timeout, bookConstants) {
var service = {};
service.mypromise = null;
service.getBook = function(id) {
if (service.mypromise) {
service.mypromise.resolve(bookConstants.EXPLICIT_CANCEL);
service.mypromise = null;
}
service.mypromise = $q.defer();
var timeoutSpan = id == 1 ? 3000 : 500;
$http.get("favouriteBooks.json").success(function(data) {
$timeout(function() {
if (service.mypromise) {
service.mypromise.resolve(data.filter(function(obj) {
service.mypromise = null;
return obj.id == id
}))
}
}, timeoutSpan);
}).error(function(msg) {
service.mypromise.reject(msg);
})
return service.mypromise.promise;
}
return service;
});
Case 2: Return $q deffer object as service response and maintain it at controller level. And in case of consecutive service call first check and explicitly resolve first service call then and proceed with other service call.
Plunkar code - code snippet
Sample Code:
$scope.getSelectedValue = function() {
var id = $scope.selitem.id
$scope.cancel();
var bookPromise = bookService.getBook(id);
$scope.requests.push(bookPromise);
bookPromise.promise.then(getBookSuccess)
.catch(errorCallback)
.finally(getBookComplete);
}
function getBookSuccess(favouriteBooks) {
if (favouriteBooks == 'User Cancelled') {
return;
}
var books = '';
angular.forEach(favouriteBooks, function(book) {
books += book.bookName + ' '
});
$scope.selectedvalues = 'Name: ' + $scope.selitem.name +
' Id: ' + $scope.selitem.id + ' Favourite Book(s): ' + books;
}
function errorCallback(errorMsg) {
console.log('Error Message: ' + errorMsg);
}
function getBookComplete() {
console.log('getBook Has Completed!');
}
$scope.cancel = function() {
if ($scope.requests) {
angular.forEach($scope.requests, function(request) {
request.resolve('User Cancelled');
clearRequest(request);
})
}
};
var clearRequest = function(request) {
$scope.requests.splice($scope.requests.indexOf(request), 1);
};
}]);
app.factory('bookService', function($http, $q, $timeout) {
var service = {};
service.getBook = function(id) {
var promise = $q.defer();
var timeoutSpan = id == 1 ? 3000 : 500;
$http.get("favouriteBooks.json").success(function(data) {
$timeout(function() {
promise.resolve(data.filter(function(obj) {
return obj.id == id
}))
}, timeoutSpan);
}).error(function(msg) {
promise.reject(msg);
})
return promise;
}
return service;
});

You can use the following to wait for two or more promises $q.all([promise1,promise2]).then(function(data){....});
To access data of first promise just use data[0] the second promise return value is saved in data[1] and so on...

cannot update variable using AngularJS

I am new to AngularJS and I am trying to send http request using .foreach loop. Here's my code
app.controller('myCtrl', function($scope, $http) {
var rd;
$http.get(furl,config).then(function mySucces(response) {
rd = response.data;
var webcontent = "";
angular.forEach(rd, function(rd1){
$http.get(furl1 + rd1.slug,config).then(function(res){
webcontent += res.data.title;
console.log(webcontent);//console 1
});
});
console.log(webcontent);//console 2
$scope.myWelcome = webcontent;
}, function myError(response) {$scope.myWelcome = response.statusText;});});
I was expected the console 2 will display the combined "res.data.title", however, it only shows the initial value.(which is empty in this case). The console log 1 is showing correctly - list the increasing "webcontent" variable.
Not sure how to keep the "webcontent" (console 2) updated value. Any response will be appreciated! Thanks!

This isn't an angular problem, this is an asynchronous javascript problem. Your code finished before your promise completes. You could use the query library to wait for all the promises to resolve, like so:
app.controller('myCtrl', function($scope, $http, $q) {
var rd;
$http.get(furl, config).then(function mySucces(response) {
rd = response.data;
var webcontent = "";
var promises = [];
angular.forEach(rd, function(rd1) {
promises.push($http.get(furl1 + rd1.slug, config);
});
$q.all(promises).then(function (results) {
angular.forEach(results, function (result) {
webcontent += result.data.title;
}
$scope.myWelcome = webcontent;
});
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});

You could just remove the webcontent variable entirely and update the $scope.myWelcome variable directly in it's place, it should work then. So:
app.controller('myCtrl', function($scope, $http) {
var rd;
$http.get(furl,config).then(function mySucces(response) {
rd = response.data;
$scope.myWelcome = "";
angular.forEach(rd, function(rd1){
$http.get(furl1 + rd1.slug,config).then(function(res){
$scope.myWelcome += res.data.title;
console.log(webcontent);//console 1
});
});
}, function myError(response) {$scope.myWelcome = response.statusText;});});

Ajax Calls are always async tasks, they are something similar window.setTimeout. It is impossible to write your code task by task. have a look:
console.log(1);
window.setTimeout(console.log.bind(console, 2));
console.log(3);
This happens because async tasks are executed in subsequent event loops (in the future).
Finally, your snippet could be something like that:
$http
.get(furl, config)
.then(function(response) { return response.data; })
.then(function(resources) {
return $q.all(resources.map(function(resource) {
return $http.get(furl1 + resource.slug, config);
}));
})
.then(function(results) {
return results.map(function(result) {
return result.data.title;
}).join('');
})
.catch(function(response) {
return response.statusText;
})
.then(function(greetings) {
$scope.myWelcome = greetings;
})
;

AngularJS & Protractor - Make a http request last longer

I'm working on tests for my angularjs app and when the page is loaded some http calls are made. When any call is made a loading circle appears and when a response is received the loading circle is hidden.
How can I make the loding circle visible for let's say 10 seconds ?

You can intercept the http requests and delay them:
network-delay.js
exports.module = function() {
angular.module('networkDelayInterceptor', [])
.config(function simulateNetworkLatency($httpProvider) {
function httpDelay($timeout, $q) {
var delayInMilliseconds = 1000;
var responseOverride = function (reject) {
return function (response) {
//Uncomment the lines below to filter out all the requests not needing delay
//if (response.config.url.indexOf('some-url-to-delay') === -1) {
// return response;
//}
var deferred = $q.defer();
$timeout(
function() {
if (reject) {
deferred.reject(response);
} else {
deferred.resolve(response);
}
},
delayInMilliseconds,
false
);
return deferred.promise;
};
};
return {
response: responseOverride(false),
responseError: responseOverride(true)
};
}
$httpProvider.interceptors.push(httpDelay);
})
};
Usage
beforeAll(function() {
var networkDelay = require('network-delay');
// You can customize the module with a parameter for the url and the delay by adding them as a 3rd and 4th param, and modifying the module to use them
browser.addMockModule('networkDelayInterceptor', networkDelay.module);
});
afterAll(function() {
browser.removeMockModule('networkDelayInterceptor');
});
it('My-slowed-down-test', function() {
});
Source: http://www.bennadel.com/blog/2802-simulating-network-latency-in-angularjs-with-http-interceptors-and-timeout.htm

You can make use of setTimeout method in javascript or alternatively $timeout function in angular js.

Limiting or delaying http requests from a AngularJS service

I have created a service that provides my AngularJS app with data, it's rather simple the service just contains lots a method that make a $http call. The problem is that this call is made everytime when a HTML item in my view (a div of product details) is visible in the view port (I'm lazy loading), thus it is possible for the user to scroll straight to the bottom of the page, etc and create a number of requests (usually around 50 - 60) that will block/slow down other requests or the app on the whole. Thus I need a way to limit, restrict, queue or delay the requests - queuing would be best, but for the time being I was just going to restrict / manage the amount of requests in the service.
This is how I call my service in my controllers / directives:
productAvailabilityService.getAvailability(scope.productId).then(function (result) {
// do stuff with the result...
});
and this is the service
.factory('productAvailabilityService', function ($http) {
var prodAv = {};
prodAv.getAvailability = function (productId) {
return $http({
method: 'GET',
url: '/api/product/getAvailability',
params: {
'productId': productId
}
}).then(
function (response) {
return response;
}, function () {
return 0;
});
}
};
return prodAv;
});
Now I want to add the limiting functionality... like so:
.factory('productAvailabilityService', function ($http) {
var prodAv = {};
prodAv.requests = 0;
prodAv.getAvailability = function (productId) {
if (prodAv.requests > 6) {
return function () {
return 'Too many requests';
};
} else {
prodAv.requests++;
return $http({
method: 'GET',
url: '/api/product/:productId/getAvailability',
params: {
'productId': productId
}
}).then(
function (response) {
prodAv.requests--;
return response;
}, function () {
prodAv.requests--;
return 0;
});
}
};
return prodAv;
});
This gives me an error when the number of requests is greater than 6, .getAvailability(...).then is not a function which I don't seem to be able to fix, can anyone see what I am doing wrong... also this method does seem a little wrong, is there a better way to manage the amount of times I can call a service / run a $http request? Thanks in advance!

You have to use a promise for productAvailabilityService. You return a function instead of a promise, so the "then()" throw an error in the first line code..
here is the fraction of code with the promise:
.factory('productAvailabilityService', function ($http,$q) {
var prodAv = {};
prodAv.requests = 0;
prodAv.getAvailability = function (productId) {
if (prodAv.requests > 6) {
var deferred = $q.defer();
deferred.reject("no more than 6 calls");
return deferred.promise;
}else{ //etc.
you could maybe also use the resolve function if you manage a delayed call,

Add this DelayHttp
app.factory('DelayHttp', ($http, $timeout) => {
let counter = 0,
delay = 100;
return (conf) => {
counter += 1;
return $timeout(() => {
counter -= 1;
return $http(conf);
}, counter * delay);
};
});
Usage:
return DelayHttp({
url: url,
method: 'GET',
params: params
});
Which queues and executes the requests by 100ms apart or max 10 requests/second. You can adjust the delay to match your desired throughput.

i would set a time gap and wait until the user arrived its desired content before issuing the requests something like
var timer;
function getData(){
$timeout.cancel(timer);
timer=$timeout(function(){
$http.get(url)
},200);
}