Comment faire des requêtes AJAX synchrone dans AngularJS contrôleur

J'ai dit que $http Angulaire est asynchrone. Toutefois, pour un certain but, j'ai besoin de faire séquentielle des requêtes AJAX.
Je veux lire tous les fichiers à partir d'une liste de fichiers, puis obtenir le nombre de tous ces fichiers. Par exemple:

contenu de "nom":

file1
file2

contenu de "fichier1":

contenu de "fichier2":

Le code suivant calcule la somme

<!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>

Depuis les deux $.les appels ajax sont séquentiels, je ne sais pas comment obtenir cette fonctionnalité dans AngularJS. Dire, en fin de compte, je veux $champ d'application.somme = 1 + 2.

Quelqu'un peut le faire fonctionner en AngularJS? Un code simple serait appréciée!

j'ai écrit une usine à ce sujet, check it out lien

OriginalL'auteur lys1030 | 2015-06-10

Vous pourriez faire usage de promesses et de promesse de chaînage (avec $q et la promesse retourné par $http). Exemple: Dans votre contrôleur, vous pourriez faire (après l'injection $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
      });

}]);

Voir aussi:

$http
$q
q$.tous
Tableau.carte - Vous pourriez aussi bien manuellement en boucle même si la batterie et poussez promesse de tableau.
Tableau.réduire - Vous pourriez aussi bien faire une boucle par le nombre et de les additionner.

Cela ne signifie pas que les appels synchrones, mais ils sont asynchrones et toujours fait ce que vous avez besoin d'une façon plus efficace et facile à gérer.

Démo

Merci pour votre réponse et de démonstration! C'est exactement ce que je veux.
vous êtes les bienvenus. Je dirais plutôt que d'adopter la solution est de l'essayer vous-même, lisez la documentation pour mieux comprendre . Tous les meilleurs
Il semble $http.get(fichier).alors, (...) ne fonctionne pas pour les fichiers json. Pourriez vous s'il vous plaît voir cette démo? lien. Merci à l'avance!

OriginalL'auteur PSL

2

Les autres réponses montrent comment utiliser correctement les $http de manière Asynchrone à l'aide de promesses ou de ce qui est aussi appelé le chaînage, et que c'est la bonne façon d'utiliser $http.
En essayant de le faire de manière Synchrone comme vous l'avez demandé va bloquer le Contrôleur de cycle qui est quelque chose que vous voulez jamais faire.

Encore, vous pouvez faire la chose terrible de vérification de l'état de promesse dans une boucle. Qui peut être fait par le $$state propriété de la promesse qui a une propriété nommée status

OriginalL'auteur n00b

Vous pouvez utiliser la promesse qui est retourné par $http appels de méthode:

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

Lorsque vous retournez une promesse dans un then rappel de la prochaine then ne sera pas appelé jusqu'à la promesse a été résolu.

Angulaire de $q(reportées ou promesse) de service

OriginalL'auteur Patrick Evans

Il est possible angulaire http fonctions à l'aide de promesses. 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();

.... eh bien, j'ai juste essayé de produire le code le plus simple possible. Vous pouvez bien sûr mettre des appels ajax à l'intérieur de ceux-ci et seulement l'avoir de retour de résoudre sur le succès de l'appel, et qui permettrait de produire ce que vous voulez. La malédiction de ces autres gens intelligents se dans leur de meilleures réponses avant moi... je veux juste assez de points pour écrire des commentaires sur d'autres trucs!

OriginalL'auteur Sir Neuman

Vous devez vous connecter pour publier un commentaire.