AngularJS $http requête ajax n'est pas asynchrone et les causes de la page d'accrocher

J'ai un service où je suis de l'extraction de données à partir du serveur. Quand je clique sur le bouton pour envoyer la requête au serveur par le biais de ce service, la fenêtre se fige jusqu'à ce que je reçois une réponse du serveur. Est-ce que je peux faire pour faire cette demande asynchrone ?

Voici mon service.

app.factory('service', function($http) {
  return {
    getLogData : function(startTime,endTime){
      return $http({
        url:     baseURL + 'getLogData',
        method:  'GET',
        async:   true,
        cache:   false,
        headers: {'Accept': 'application/json', 'Pragma': 'no-cache'},
        params:  {'startTime': startTime , 'endTime': endTime}
      });
    }
  };
)};

HTML.

<button ng-click="getData()">Refresh</button>
<img src="pending.gif" ng-show="dataPending" />

Code

$scope.getData = function(){
  service.getLogData().success(function(data){
    //process data
  }).error(function(e){
    //show error message
  });
}

Les appels Ajax ne devrait pas être synchrone. En face, vous n'avez même pas besoin async: true option. Pouvez-vous expliquer plus en détail comment votre fenêtre de gel? Comme tout n'est pas cliquable, de ne pas répondre?
Vous avez beaucoup de données retourné? L'appel ne devrait pas bloquer lors de l'appel ajax, mais j'imagine que ça pourrait bloquer si elle renvoie un grand nombre de données et les données de process" le code est peut-être lent.
Tout n'est pas cliquable. Je n'ai pas beaucoup de données, mais il faut du temps pour y arriver. Aussi, je suis en utilisant ng-grid à présent.

OriginalL'auteur lostpacket | 2013-09-27

angularjs asynchronous

13

Alors qu'il existe des argument sur les avantages et les inconvénients de votre approche, je pense que le problème est la réponse ici: Appel AJAX gèle navigateur pour un peu, alors qu'il reçoit la réponse et exécute succès

Pour tester si c'est en fait une partie du problème, le mannequin en place d'une réponse et de le servir de manière statique. J'utilise Fiddler ou WireShark pour obtenir la réponse avant de l'enregistrer dans un fichier, comme testService.json. XHR et tous ses dérivés comme le $HTTP $.ajax le voir comme un service de si les en-têtes peuvent être légèrement différentes.

Merci. C'était en effet la solution. Rien de mal avec Angulaire. J'ai utilisé l'auto de l'exécution de la fonction.

OriginalL'auteur Nathaniel Johnson
3

Utiliser le succès de la promesse, et envelopper jusqu'à l'enregistrement de données dans un ensemble d'objets que vous pouvez attacher à un $scope.

Alors au lieu d'avoir à votre service un blocage de la méthode, il faut la maintenir à jour une liste de "LogEntries".
```
   //constructor function
   var LogEntry = function() {
      /*...*/
   }

   var logEntries = [];

   //Non-blocking fetch log data
   var getLogData = function() {
        return $http({
            url : baseURL + 'getLogData',
            method : 'GET',
            async : true,
            cache : false,
            headers : { 'Accept' : 'application/json' , 'Pragma':'no-cache'},
            params : {'startTime' : startTime , 'endTime' : endTime}
        }).success(function(data) {;
           //for each log entry in data, populate logEntries
           //push(new LogEntry( stuff from data ))...
        };
   } 
```
Puis dans votre contrôleur, d'injecter votre service et de référence de ce service journal des données du tableau de façon Angulaire de les regarder et de les modifier à l'afficher correctement
```
   $scope.logEntries = mySvc.logEntries;
```
Ensuite dans le code HTML, il suffit de faire quelque chose de plus logEntries:
```
  <p ng-repeat="logEntry in logEntries">
    {{logEntry}}
  </p>
```
$http renvoie une promesse, alors je suis d'accord que le service doit encapsuler la réponse dans une sorte d'objet, je ne crois pas que sa méthode de blocage. Je me demandais si, au contraire, le problème est l'appel ajax est de retour une énorme quantité de données et le code de traitement est de congeler le tout.
Attribuer $http promesse de vue n'est pas une bonne idée, voir ici github.com/angular/angular.js/issues/3196
mais il n'est pas de l'affectation de la promesse à la vue. Le retour de l'promesse est résolu dans le contrôleur et les données traitées. Il n'est pas affecté.
Les données n'est pas énorme. Seulement 30 lignes et 6 colonnes. J'ai pensé que ses le ng-grid mais dès qu'il a reçu des données, il analysés immédiatement.
$scope.logEntries = mySvc.logEntries; N'est-ce pas un appel. J'ai besoin d'obtenir journal basé sur différentes heures de début et fin.

OriginalL'auteur Doug T.
2

utiliser ce code pour config
```
$httpProvider.useApplyAsync(true);
```
OriginalL'auteur Behnam Mohammadi
0
```
var url = //Your URL;

  var config = {
    async:true
  };

  var promise= $http.get(url, config);
     promise.then(
     function (result) 
     {
       return result.data;
     },
     function (error) 
     {
       return error;
     }
    );
```
Veuillez modifier pour vous expliquer comment cela contribue à répondre à l'utilisateur en question.
Tous sont montrés ci-angulaire de syntaxe ont été vieille/mal, donc mon intesion était de les mettre à jour. Le code ci-dessus est de faire async appel de service, toutefois, si des données est énorme, vous ne pouvez pas faire beaucoup à côté client seulement.

OriginalL'auteur Sanjeev Rao

Vous devez vous connecter pour publier un commentaire.