Question

我被告知Angular中的$ http是异步的。但是，出于某种目的，我需要发出顺序AJAX请求。我想从文件列表中读取所有文件，然后从所有这些文件中获取数字。例如：

“fileNames”的内容：

file1
file2

“file1”的内容：

“file2”的内容：

以下代码将计算总和

<!DOCTYPE html>
<html>
<body>
<p id="id01"></p>
<script src="http://code.jquery.com/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>

由于两个$ .ajax调用是顺序的，我不知道如何在AngularJS中实现这个功能。说，最后，我想要$ scope.sum = 1 + 2。

有人可以在AngularJS中使用吗？一些简单的代码将不胜感激！

Answer 1

您可以使用promises并保证链接（使用$q和$http返回的承诺）。示例：在您的控制器中，您可以执行（在注入 $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
      });

}]);

另见：

$http
的 $q

的 $q.all

Array.map - 你也可以通过数组手动循环并将promise推送到数组。

Array.reduce - 您也可以循环播放并添加它们。

这并不意味着这些调用是同步的，但它们是异步的，并且仍然以更有效的方式执行您所需的操作并且易于管理。

<强> Demo

Answer 2

其他答案显示了如何使用promises或者也称为chaining的异步方式正确使用$ http，这是使用$ http的正确方法。尝试按照您的要求同步执行此操作将阻止Controller的循环，这是您永远不想做的事情。

你仍然可以做一个在循环中检查一个承诺状态的可怕的事情。这可以通过具有名为$$state

的属性的promise的status属性来完成

Answer 3

您可以使用$ http方法调用返回的promise：

//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);
});

当您在then回调中返回承诺时，在承诺解决之前，不会调用下一个then。

Angular's $q(deferred/promise) service

Answer 4

使用promises的角度http函数是可能的。 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();

如何在AngularJS控制器

4 个答案: