Zugriff auf Wertebereich in then() trotz Pfeilfunktion

Question

In dieser Klasse für eine eckige Komponente habe ich ein Problem Bereich, die ich nicht verstehe.

class ConnectionsComponent { 
    constructor($http, $q) { 
    this.$http = $http; 
    this.$q = $q; 
    this.listGotten = []; 
    this.arrayOfGets = ['id1', 'id2', 'id3']; 
    } 

    $onInit() { 
    var promises = []; 

    angular.forEach(this.arrayOfGets, getThis => { 
     var promise = this.$http.get('/api/endpoint/' + getThis) 
     promises.push(promise) 
    }) // end angular.forEach 

    this.$q.all(promises).then((data) => { 
     this.listGotten = data; 
     console.log(this.listGotten) // <-- prints array of objects 
    }) 

     console.log(this.listGotten) // <-- empty array (PROBLEM!)  

    } // end $oninit 

} // end class 

Nach this post, es sollte kein Problem sein, weil ich den Pfeil Funktion bin mit, die den Umfang in den then() gibt. Es ist NICHT undefined, es ist nur ein leeres Array, als ob this.listGotten nie data zugewiesen wurde.

Answer 1

Es ist eine Frage des Timings. Ihr .then()-Handler wird SPÄTER genannt, da er den Abschluss all Ihrer asynchronen Vorgänge darstellt. Während Ihr:

console.log(this.listGotten) // <-- empty array (PROBLEM!) 

wird vor Ihrer .then() Handler ausgeführt hat laufen auch so hat this.listGotten noch nicht festgelegt. Ihre Pfeilfunktionen funktionieren wie erwartet - das ist kein Problem damit.

Wenn Sie einige console.log() Aussagen in Ihren Code setzen die tatsächliche Zeitpunkt der Dinge so zu sehen:

$onInit() { 
    var promises = []; 
    console.log("1 - start"); 
    angular.forEach(this.arrayOfGets, getThis => { 
     var promise = this.$http.get('/api/endpoint/' + getThis) 
     promises.push(promise) 
    }) // end angular.forEach 

    console.log("2 - about to do .all()"); 
    this.$q.all(promises).then((data) => { 
     console.log("3 - inside .then() handler"); 
     this.listGotten = data; 
     console.log(this.listGotten) // <-- prints array of objects 
    }) 

     console.log("4 - after .then() handler"); 
     console.log(this.listGotten) // <-- empty array (PROBLEM!)  

    } // end $oninit 

Dann werden Sie diese Ausgabe sehen:

1 - start 
2 - about to do .all() 
4 - after .then() handler 
3 - inside .then() handler 

So können Sie sehen, dass Ihr .then() Handler aufgerufen wird nachdem Ihr anderer console.log() ausgeführt wird.

Die Lösung für asynchrone Ergebnisse ist es, "sie im Callback zu verwenden, wo sie präsentiert werden", weil das der EINZIGE Ort ist, an dem Sie den Zeitpunkt kennen, zu dem sie existieren.

Denken Sie daran, dass im asynchronen Code alle Ihre $http.get()-Operationen die HTTP-Anfragen initiieren und dann im Hintergrund ausgeführt werden. Der Rest Ihres Javascript wird weiterhin ausgeführt und einige Zeit später werden Ihre asynchronen Anforderungen beendet und rufen ihre Callbacks auf, lange nachdem der Rest Ihres Codes fertig ausgeführt wurde.

Answer 2

Das passiert, weil this.$q.all selbst eine Verheißung (asynchron) ist, die gelöst wird, wenn alle Eingabeversprechen aufgelöst sind. Also, wenn Sie dies schreiben:

this.$q.all(promises).then((data) => { 
    this.listGotten = data; 
    console.log(this.listGotten) // <-- prints array of objects 
}) 

//This will be executed before the $q.all is resolved or rejected ! 
//or at least will not wait for $q.all to finish 
console.log(this.listGotten) // <-- empty array (PROBLEM!)