post request always executed at last angularjs function (not executing sequentially)

Question

i am facing an issue. i have angularjs function which in turn call to another angularjs function which has post request.This post request always fire at last when first function ends..it is not fired sequntially.

   pseudo code

     $scope.fun1= function()
         {

            $scope.fun2();


            console.log("after call to  fun2"); // execute before fun2
         }

   $scope.fun2=function()
        {

          $http.post(valid request);///this always executed at last..means at end of  function 1...no matter  at what position i call it
       }

Please someone explain me this behaviour..any workaround for this...i want to execute all http request sequentially. Thanks in advance!

fun2 is an async function - once it's called the rest of your code will continue to run while the post is in progress. — tymeJV, Jul 23 '14 at 18:44
@tymeJV i want to suspend other activity unless i get response from fun2..how to achieve this ? — sar, Jul 23 '14 at 18:47

score 1 · Accepted Answer · answered Jul 23 '14 at 18:50

You can use promises. A promise will give you a variable on which you can call register a piece of code to be called based on some event happening in the future - in this case, $http.post() returning. You can read more about promises here and take a look at your modified pseudo code below.

//       pseudo code

     $scope.fun1= function()
         {

            $scope.fun2().then(function(data) {
                 console.log("after call to  fun2"); // execute before fun2
             });



         }

   $scope.fun2=function() {
           var deferred = $q.defer();
            $http({
                url: "whatever/something",
                method: "POST",
                params: {// if you need params}
            }).success(function (data) {
                deferred.resolve(data);
            }).error(function () {
                deferred.resolve(null);
            });
            return deferred.promise;

       }

http request is not executing..if i use above code.check both success and error bock.. — sar, Jul 23 '14 at 19:07

score 0 · Answer 2 · answered Jul 23 '14 at 19:00

What you're looking for is a synchronous call. While that is possible with the XmlHttpRequest object, angular $http doesn't support that currently and it is considered poor programming practice to freeze the web page while waiting for a response from the server. If you want the console log to execute after the post, you can return the result of the call to .post() and use the .success() method to do something after it is complete (PLNKR):

var app = angular.module("MyApp", []);

var ctrl = app.controller("MyCtrl", function($scope, $http) {
  $scope.fun1 = function() {
    $scope.fun2().success(function(data) {
      console.log('after call to fun2');
    });
  };

  $scope.fun2 = function() {
    var result = $http.get('data.json').success(function(data) {
      console.log('fun2 got', JSON.stringify(data));
    });
    return result; // still has .success() and .error() functions on it
  };
})

post request always executed at last angularjs function (not executing sequentially)

2 Answers2