矢印関数にもかかわらずthen（）の値のスコープにアクセスできない

Question

角度コンポーネントのこのクラスでは、わからない範囲の問題があります。

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 

私はthen()にスコープを通る矢印機能を使用していますので、this postによると、それは問題ではありません。それはundefinedではなく、this.listGottenにはdataが割り当てられていないかのように空の配列にすぎません。

Answer 1

タイミングの問題です。 .then()ハンドラは、すべての非同期操作の完了を表すため、LATERと呼ばれます。あなた、これに対し：あなたの.then()ハンドラが、そうであってもthis.listGottenを実行する前に

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

が実行されたことはまだ設定されていません。あなたの矢印機能は期待通りに機能しています - これはそれに関連する問題ではありません。

あなたはこのようなものの実際のタイミングを見るためにあなたのコードにいくつかのconsole.log()文を置く場合：

$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 

を次に、あなたはこの出力が表示されますので、

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

、あなたが見ることができます他のconsole.log()が実行された後に.then()ハンドラが呼び出されたことを示します。

非同期結果の解決策は、存在するタイミングを知る唯一の場所であるため、非同期結果の「コールバックで使用する」ことです。

非同期コードでは、すべての$http.get()オペレーションがhttp要求を開始するだけで、バックグラウンドで実行されます。 JavaScriptの残りの部分は引き続き実行され、残りのコードの実行が終了してから、しばらくしてから、非同期要求が完了してコールバックを呼び出すことがあります。

Answer 2

これは、this.$q.allそれ自体がすべての入力約束が解決されたときに解決される約束（非同期）であるために起こります。だから、あなたがこれを書くとき：

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