How to asynchronously call functions - angularjs

Question

I have some list of functions to call in controller say
$scope.trader = {};
$scope.getUserLocation();
$scope.searchPaymentMethod($scope.trader.cityname);
$scope.getUserCurrency();
and each of these functions make an HTTP call to get some data. Say getUserLocation does this...
$scope.getUserLocation = function() {
var dataPromise = locationServiceCustomised.getCurrentLocation();
dataPromise.then(function(result) {
$scope.trader.cityname=result.countryName;
});
}
and these all functions set some value to $scope.trader whose value is being used in calling another function.
Now how to make one by one Asynchronous call to each of these functions so that these functions work one after another.
My full code is somewhat like this...
$scope.trader = {};
$scope.getOfferList = function() {
if($scope.trader.cityname == null || $scope.trader.cityname == '') {
$scope.getUserLocation();
}
$scope.searchPaymentMethod($scope.trader.cityname);
$scope.getUserCurrency();
}
$scope.getUserLocation = function() {
var dataPromise = locationServiceCustomised.getCurrentLocation();
dataPromise.then(function(result) {
$scope.trader.cityname=result.countryName;
});
}
$scope.searchPaymentMethod = function(country) {
locationService.paymentMethod({cityname: country}, function(data) {
------- Some Functionality-------
});
};
$scope.getOfferList();

Answer 1

If you have asynchronous functions that depend on values obtained from previous asynchronous functions, you need to chain promises with .then. If the functions can be called in parallel, then you need to use $q.all.
In your case, searchPaymentMethod is strictly dependent on value from getLocation, while getUserCurrency can be done in parallel.
$scope.getOfferList = function() {
var paymentMethodPromise =
$q.when($scope.trader.cityname)
.then(function(cachedLocation){
if (cachedLocation) return cachedLocation;
return getUserLocation();
})
.then(function(location){
// cache, if needed, but better do this in a service
$scope.trader.cityname = location;
return searchPaymentMethod(location);
});
var currencyPromise = getUserCurrency();
// when all complete, calculate offerList
return $q.all({
paymentMethod: paymentMethodPromise,
currency: currencyPromise })
.then(function(data){
var paymentMethod = data.paymentMethod,
currency = data.currency;
// based on that get offerList
return offersList;
})
};
Needless to say, that for this to work, the expectation is for all these functions (i.e. searchPaymentMethod, getUserLocation, etc...) return a promise of the right value. As an example, getUserLocation doesn't do that now, and should be changed to something like the following:
function getUserLocation(){
return locationServiceCustomised
.getCurrentLocation()
.then(function(location){
// manipulate the result if needed
return location.cityName;
})
}
A few other things to note:
You don't need to expose every function on the $scope - expose only the ones that need to be invoked from the View, e.g. <button ng-click="getOfferList()">
It's better to leave the cached-or-not decision to the service (that should implement these functions) and leave a clean API for the controller.

Answer 2

You basically need to chain promises. So, first of all, all your functions have to return a promise. So, for your first function you would have:
$scope.getUserLocation = function() {
var deferred = $q.defer();
locationServiceCustomised.getCurrentLocation.then(function(result) {
deferred.resolve(result);
});
return deferred;
}
Then just chain it:
$scope.getUserLocation()
.then($scope.searchPaymentMethod)
.then($scope.getUserCurrency);
where
$scope.searchPaymentMethod = function(input) {
var deferred = $q.defer();
$scope.trader.cityname = input.cityname;
// do some computationn
deferred.resolve(whateveryouwanttoreturn);
returnn deferred;
}