JavaScript benimmt weirdly (vielleicht aufgrund ihrer asynchronen Natur)

Question

I Dieses Stück Code in JS hat, wie unten beschrieben

for (id in ids) { 
    if (id needs to be called) { 
     console.log(id); // statement 1 
     $http.post('someEndpoint', {id : id}).then(function success(response) { 
      console.log(id); // statement 2 
      someDataStructure[id].data = response.data; 
     }); 
    } 
} 

ids = [1, 2, 3] Unter der Annahme, auf Anweisung 1 wird auf der Konsole 1 2 3 gedruckt. Bei Anweisung 2 wird 3 3 3 gedruckt. Dies ist offensichtlich weniger als ideal und ich verliere Daten für . Außerdem muss ich hinzufügen, dass der Endpunkt Anfragen für 1 2 3 bekommt, also bin ich an dieser Stelle wirklich verwirrt. Es wäre toll, wenn jemand etwas Licht werfen könnte und mir helfen würde zu verstehen, wie ich das beheben kann.

Answer 1

Wrap id in ein closure function:

for (id in ids) { 
    (function(id) { 
     if (id needs to be called) { 
      console.log(id); // statement 1 
      $http.post('someEndpoint', {id : id}).then(function success(response) { 
       console.log(id); // statement 2 
       someDataStructure[id].data = response.data; 
      }); 
     } 
    })(id); 
} 

Sie auch einfach könnte eine forEach Schleife verwenden, die automatisch die Schließung machen:

ids.forEach(function(id) { 
    if (/*id needs to be called*/) { 
     console.log(id); // statement 1 
     $http.post('someEndpoint', {id : id}).then(function success(response) { 
      console.log(id); // statement 2 
      someDataStructure[id].data = response.data; 
     }); 
    } 
});