admin管理员组

文章数量:1345196

I've been told that $http in Angular is asynchronous. However, for some purpose, I need to make sequential AJAX requests. I want to read all the files from a file list, and then get the number from all those files. For example:

content of "fileNames":

file1
file2

content of "file1": 

1

content of "file2":

2

The following code will calculate the sum

<!DOCTYPE html>
<html>
<body>
<p id="id01"></p>
<script src=".11.3.min.js"></script>
<script>

var fileString;
/* first AJAX call */
$.ajax({
    url: 'fileNames', type: 'get', async: false,
    success: function(content) {
        fileString = content;
    }
});
var fileList = fileString.split('\n');
var sum = 0;
for (var i = 0; i < fileList.length; i++) {
      /* second AJAX call in getNumber function */
      sum += getNumber(fileList[i]);
}
document.getElementById("id01").innerHTML = sum;

function getNumber(file) {
    var num;
    $.ajax({url: file, type: 'get', async: false,
      success: function(content) {
            num = content;
        }
    });
    return parseInt(num);
}

</script>
</body>
</html>

Since the two $.ajax calls are sequential, I don't know how to achieve this functionality in AngularJS. Say, in the end, I want $scope.sum = 1 + 2.

Can someone make it work in AngularJS? Some simple code would be appreciated!

I've been told that $http in Angular is asynchronous. However, for some purpose, I need to make sequential AJAX requests. I want to read all the files from a file list, and then get the number from all those files. For example:

content of "fileNames":

file1
file2

content of "file1": 

1

content of "file2":

2

The following code will calculate the sum

<!DOCTYPE html>
<html>
<body>
<p id="id01"></p>
<script src="http://code.jquery./jquery-1.11.3.min.js"></script>
<script>

var fileString;
/* first AJAX call */
$.ajax({
    url: 'fileNames', type: 'get', async: false,
    success: function(content) {
        fileString = content;
    }
});
var fileList = fileString.split('\n');
var sum = 0;
for (var i = 0; i < fileList.length; i++) {
      /* second AJAX call in getNumber function */
      sum += getNumber(fileList[i]);
}
document.getElementById("id01").innerHTML = sum;

function getNumber(file) {
    var num;
    $.ajax({url: file, type: 'get', async: false,
      success: function(content) {
            num = content;
        }
    });
    return parseInt(num);
}

</script>
</body>
</html>

Since the two $.ajax calls are sequential, I don't know how to achieve this functionality in AngularJS. Say, in the end, I want $scope.sum = 1 + 2.

Can someone make it work in AngularJS? Some simple code would be appreciated!

  • javascript
  • jquery
  • ajax
  • angularjs
  • angular-promise
Share Improve this question edited Jun 10, 2015 at 1:06 PSL 124k21 gold badges256 silver badges243 bronze badges asked Jun 10, 2015 at 0:27 lys1030lys1030 2831 gold badge5 silver badges17 bronze badges 1
  • i wrote a factory about it, check it out link – Siddharth Commented Jan 8, 2017 at 7:32
Add a ment  | 

4 Answers 4

Reset to default 3

You could make use of promises and promise chaining (with $q and the promise returned by $http). Example: In your controller you could do (after injecting $http, $q):

angular.module('myApp').controller('MyCtrl', ['$http','$q','$scope', function($http, $q, $scope){

    function getData(){
        //return promise from initial call
         return $http.get('fileNames')
                .then(processFile) //once that is done call to process each file
                .then(calculateSum);// return sum calculation
      }

      function processFile(response){
         var fileList = response.data.split('\n');
          //Use $q.all to catch all fulfill array of promises
          return $q.all(fileList.map(function(file){
             return getNumber(file);
          }));
      }

      function getNumber(file) {
          //return promise of the specific file response and converting its value to int
          return $http.get(file).then(function(response){
             return parseInt(response.data, 10);
          });

          //if the call fails may be you want to return 0? then use below
          /* return $http.get(file).then(function(response){
             return parseInt(response.data, 10);
          },function(){ return 0 });*/
      }

      function calculateSum(arrNum){
          return arrNum.reduce(function(n1,n2){
             return n1 + n2;
          });
      }

      getData().then(function(sum){
         $scope.sum = sum;
      }).catch(function(){
         //Oops one of more file load call failed
      });

}]);

Also see:

  • $http
  • $q
  • $q.all
  • Array.map - You could as well manually loop though the array and push promise to array.
  • Array.reduce - You could as well loop through number and add them up.

This does not mean that the calls are synchronous, but they are asynchronous and still does what you need in a more efficient way and easy to manage.

Demo

The other answers show how you properly use $http in an Asynchronous manner using promises or what is also called chaining, and that is the correct way of using $http. Trying to do that Synchronously as you have asked will block the Controller's cycle which is something you never want to do.

Still you can do the terrible thing of checking status of a promise in a loop. That can be done by the $$state property of the promise which has a property named status

You can use the promise that is returned by $http method calls:

//Do some request
$http.get("someurl")
//on resolve call processSomeUrlResponse
.then(processSomeUrlResponse)
//then do another request
.then(function(){
   return $http.get("anotherurl").then(processAnotherUrlResponse);
})
//when previous request is resolved then do another 
.then(function(){
   return $http.get("yetanotherurl").then(processYetAnotherUrlResponse);
})
//and do another
.then(function(){
   return $http.get("urls").then(processUrlResponse);
});

When you return a promise in a then callback the next then will not be called till the promise has been resolved.

Angular's $q(deferred/promise) service

It is possible with angular http functions using promises. E.G:

$scope.functionA = function(){
    return $q(function(resolve){
        resolve("theAnswertoallquestions");
    });
}

$scope.functionB = function(A){
    return $q(function(resolve);
        $http.get("URLRoot/" + A).success(function(){resolve();});
    });
}

$scope.functionC = function(){
    return $q(function(resolve);
        resolve("I AM THE LAST TO EXEGGCUTE!!!");
    });
}

$scope.allTogetherNow = function(){
    var promise = $scope.functionA();
    promise.then(function(A){
        return $scope.functionB(A);
    }).then(function(){
        return $scope.functionC();
    }).then(function(){ 
        return "ALL DONE"
    });
}

$scope.allTogetherNow();

本文标签： javascriptHow to make synchronous AJAX requests in AngularJS controllerStack Overflow

版权声明：本文标题：javascript - How to make synchronous AJAX requests in AngularJS controller - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743739980a2530710.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。