AngularJS $http running while my other f unction is not finished

Question

I have an AngularJS function case where my $http runs even before my first function is finished

Here is an example format of my code:

$scope.function =  function(){
    $scope.functionOne(); // This function declares all the scope variable that I need to produce to throw on my API
    $scope.functionTwo(); // This is the function that throws a request to my API via $http.post
}

I need those variables but every variable is just a blank string when it reaches to my backend because $http throws a request before the first function finishes

UPDATE

$scope.functionOne = function(){
var geocoder = new google.maps.Geocoder();
if(geocoder){
    // console.log("dean")
    // console.log($scope.dealership.address);
    // console.log($scope.dealership.suburb)
    geocoder.geocode({
        'address': $scope.dealership.address + ', ' + $scope.dealership.suburb || "1/53 Township Drive, West Burleigh"
    }, function(result, status){
        // console.log("armada");
        // console.log(status);
        if(status == google.maps.GeocoderStatus.OK){
            console.log(result);

            var center_lat = result[0].geometry.location.lat();
            var center_lng = result[0].geometry.location.lng();

            var lat = result[0].geometry.location.lat();
            var lng = result[0].geometry.location.lng();

            $scope.$apply();
        }

        $scope.map.center.latitude = center_lat;
        $scope.map.center.longitude = center_lng;

        $scope.map.markers.pop();
        $scope.map.markers.push({
            latitude: lat,
            longitude: lng
        });
        $scope.dealership.latitude = lat;
        $scope.dealership.longitude = lng;

        $scope.$apply();
    });
}
};

$scope.functionTwo = function(){
    $scope.loadingData = true;
  // The code below is a factory on a scope variable
  $scope.dealership.create().then(function(response){

});
}

Any chance you could post an example where you are actually using the $http call? — James Considine, Aug 23 '16 at 08:06
This is a little *too* abstract. Provide a more concrete sample please. — deceze, Aug 23 '16 at 08:06
The answers don't seem to be mentioning that this is because $http.post is an asynchronous function. This means that it executes in parallel with the rest of your code in a non-blocking manner. — byxor, Aug 23 '16 at 08:10
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Grundy, Aug 23 '16 at 08:10

Hemant Metalia · Answer 1 · 2016-08-23T08:09:25.347

0

The better option for depending function call is to use CallBack function.

Try to call your second function in the callback function of first function.

EDIT:

The another approach of angular is using Promises

You can refer more about it at https://docs.angularjs.org/api/ng/service/$qenter link description here

edited Aug 23 '16 at 08:09

answered Aug 23 '16 at 08:06

Hemant Metalia

29,730
18
72
91

The modern way is typically to return a `Promise` though. – deceze Aug 23 '16 at 08:07
@deceze yes returning `Promise` would also work. thanks for suggestion – Hemant Metalia Aug 23 '16 at 08:08

score 0 · Answer 2 · answered Aug 23 '16 at 08:07

0

Promises is the way to go. Once you are done with functionOne resolve the variables and then return the promise. Once the promise is successfully resolved run the second method.

Hope this helps

Happy Learning

Vatsal

answered Aug 23 '16 at 08:07

Vatsal

2,068
4
21
24

AngularJS $http running while my other f unction is not finished

2 Answers2