Eine Schleife anstelle von mehreren $ http Verkettungen?

Question

sorry, ich Antworten überprüft, aber immer noch verstehe nicht, wie man es machen:

Ich habe eine Reihe bekam: $ http gekettet Anrufe mit $ q

var surfaces = [  
    {min:0,max:499}, 
    {min:500,max:999}, 
    {min:1000,max:1499}, 
    {min:1500,max:1999}, 
    {min:2000,max:2399}, 
    {min:2400,max:2999}, 
    {min:3000,max:3999}, 
    {min:4000,max:5999}, 
    {min:6000,max:100000} 
] 

Und ich habe dies looong bekam :

$q.when() 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[0]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[1]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[2]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[3]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[4]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[5]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[6]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[7]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 
    .then(function() { 
     $http.post('backend/backend.php?action=get_normes',surfaces[8]).success(function(data){ 
       $scope.normes.push(data); 
     }) 
    }) 

Ich würde lieber eine Schleife machen, aber habe jetzt Idee, wie man das macht !!

EDIT: Ich habe viel größeres Problem: Daten sind nicht in Ordnung in $ scope.normes! Es ist immer anders! Wie könnte ich tun, um immer in Reihenfolge zu schieben? Wie könnten die Daten in Ordnung sein?

Ich habe ng-Wiederholungen wie folgt, aber die Informationen sind nicht gut geordnet wegen $ http synchornicity;

<div class="row "> 
       <div class="col-lg-10" style="overflow: auto; max-height: 600px;"> 
        <table class="table table-bordered table-hover " border="1" > 
         <thead > 
           <tr> 
           <th> Désignation</th> 
           <th> Total Magasins</th> 
           <th> Moy Habitants Zone</th> 
           <th> Ca Moyen</th> 
           <th> EO Mini</th> 
           <th> EO Maxi</th> 
           <th> Coef Moyen</th> 
           <th> Pourcent Côtier</th> 
           <th> Pourcent Urbain</th> 
           <th> Tx Habituels</th> 
           <th> Tx fréquentation</th> 
           <th> Tx fidélisation</th> 
           <th> Zone Attraction</th> 
           <th> Revenus Zone</th> 
           <th> Nb Perso Foyer</th> 
           <th> Age Moyen</th> 
           </tr> 
         </thead> 

         <tbody > 
          <tr ng-repeat="norme in normes" > 
          <td>Surface 0-499 m²</td> 
          <td>{{::norme.nb_magasins | number:0}}</td> 
          <td>{{::norme.moy_habitants_zone | number:0}}</td> 
          <td>{{::norme.ca_moyen | number:0}}</td> 
          <td>{{::norme.eomin | number:0}}</td> 
          <td>{{::norme.eomax | number:0}}</td> 
          <td>{{::norme.coef_moyen | number:2}}</td> 
          <td></td> 
          <td></td> 
          <td>{{::norme.tx_habituels | number:2}}</td> 
          <td>{{::norme.tx_frequentation | number:2}}</td> 
          <td>{{::norme.tx_fidelisation | number:2}}</td> 
          <td>{{::norme.attraction | number:0}}</td> 
          <td>{{::norme.revenus_zone | number:0}}</td> 
          <td>{{::norme.nb_pers_foyer | number:2}}</td> 
          <td>{{::norme.age_moyen | number:2}}</td> 
          <td ></td> 
          </tr> 


         </tbody> 

        </table> 
       </div> 

Jedes Mal, wenn ich die $ q wiederhole, kommt es mit einer anderen Reihenfolge! Wie könnte ich tun?

EDIT: So bin immer ich jetzt Standards JSON-Objekte aus dem Back-End, so dass es simplier (Editied der Tabelle zu diesem Beitrag html) ist, aber mit den Lösungen, die Sie sanft zur Verfügung gestellt, tut es noch in den rechten Seite angezeigt Auftrag. Die $ http wird in der richtigen Reihenfolge gestartet, aber es scheint, dass $ scope.normes nicht aufgelistet ist, da die $ http gestartet wurden! (Oh, ich denke, ich kann vielleicht mit der orderby im Frontend bestellen ... Ich vergaß, aber ich dachte, es wäre möglich, die json - Objekte zu bestellen, wenn sie in das Array geschoben werden, aber in der Ansicht erscheint es nicht wie beim $ http haben genannt)

Answer 1

Try this ::

$scope.onAllDone = function() { 
    var promises = []; 

    angular.forEach(surfaces , function(surface) { 
     promises.push($http.post('backend/backend.php?action=get_normes',surface)).then(function(data) { 
      $scope.normes.push(data); 
      return data; 
     }); 
    }); 

    return $q.all(promises); 
} 

USE:: 

$scope.onAllDone().then(fnSuccess, fnError); 

Answer 2

Versprechen und $ q.all (doc) sind deine Freunde.

Genauer gesagt, müssen Sie für jeden Aufruf eine Zusage machen (wenn der Aufruf selbst keinen zurückgibt), schieben Sie sie in ein Array und rufen $ q.all (Versprechen) .then (allFinished).

function callUpdate(x, promises) { 
    var d = $q.defer(); 
    $http.post('backend/backend.php?action=get_normes',x).then(function(resp){ 
     $scope.normes.push(resp.data); 
     d.resolve(resp.data); 
    }) 
    promises.push(d.promise); 
} 

... 
var promises = []; 
$scope.normes = []; 
for (var i = 0; i < surfaces.length; i++) { 
    callUpdate(surfaces[i], promises); 
} 

$q.all(promises).then(function() { 
    // called when all promises have been resolved successully 
}); 

Answer 3

eine Reihe von Versprechungen erstellen

var promises = []; 
surfaces.forEach(function(surface){ 
    promises.push($http.post('backend/backend.php?action=get_normes',surface)); 
}) 

Sie $q.all() verwenden können und für alle Versprechungen warten und Array.concat() verwenden zu vervollständigen $scope.normes Array zu erstellen.

$q.all(promises).then(function (results) { 
    $scope.normes = [].concat.apply([],results); 
}); 

Answer 4

Wenn Versprechen Chaining, ist es wichtig zu Rückkehr die nachfolgenden Versprechen an die Funktion .then Methode handler:

var arrayPromise = $q.when([]) 
    .then(function (dArray) { 
     var httpPromise = $http.post('backend/backend.php/action=get_normes',surfaces[0]) 
     var dPromise = httpPromise.then(function(response) { 
      $scope.normes.push(response.data); 
      dArray.push(response.data); 
      return dArray; 
     }); 
     return dPromise; 
    }).then(function(dArray) { 
     console.log("one XHR is complete"); 
     console.log(dArray); 
    }); 

Wenn der Code etwas an die Handler-Funktion, der $ q zurückzukehren scheitert Service löst das Versprechen als undefined und führt sofort die nächste Funktion aus. Durch das Zurückgeben des nachfolgenden Versprechens wartet der Dienst $ q auf die Auflösung des Versprechens, bevor das nächste Versprechen in der Kette ausgeführt wird.

---

Das sagte. Wie erstellt man eine Schleife, die aufeinanderfolgende Versprechen kettet?

var arrayPromise = $q.when([]); 

for (let n=0; n<surfaces.length; i++) { 
    arrayPromise = arrayPromise 
     .then(function (dArray) { 
     var httpPromise = $http.post(url,surfaces[n]); 
     var dPromise = httpPromise.then(function(response) { 
      $scope.normes.push(response.data); 
      dArray.push(response.data); 
      //return dArray to chain 
      return dArray; 
     }); 
     return dPromise; 
    }); 
}; 

arrayPromise.then(function(dArray) { 
    console.log("all XHRs are complete"); 
    console.log(dArray); 
}).catch(function(errorResponse) { 
    console.log("one of the XHRs failed"); 
    console.log(errorResponse.status); 
    throw errorResponse; 
}); 

Erstellen Sie eine Variable mit einem Versprechen für ein leeres Array. Dann ordnen Sie in der Schleife einfach das Versprechen, das von der .then-Methode abgeleitet wurde, dieser Variablen zu. Jede Iteration der Schleife gibt ein Array zurück, das ein Element größer als die vorherige Iteration ist. Außerdem hat jede Iteration den Nebeneffekt, dass ein Objekt an den Bereich verschoben wird.