web-dev-qa-db-ja.com

AngularJS $ promise then（）データが未定義

$ scope変数に割り当てられたデータを取得しようとしています。 $ promise.then（）関数の内部では正しく表示されていますが、関数の外部では未定義として表示されています。以下は私のコントローラーコードです：

angular.module('testSiteApp').controller('TestController', function ($scope, Tests) { 

$scope.test = Tests.get({id: 1});

$scope.test.$promise.then(function(data) {
    $scope.tasks = data.tasks;
    console.log($scope.tasks);
});

console.log($scope.tasks); 

});

Then（）関数内の結果：

[Object, Object, Object, Object]

Then（）関数の外部の結果：

undefined

私が使用している「テスト」サービスファクトリは次のとおりです。

angular.module('testSiteApp').factory('Tests', function($resource) {

return $resource('/api/test/:id', {id: '@id'}, { 'update': { method: 'PUT' } } );

});

リソースのgetの代わりにqueryメソッドを使用し、isArrayをtrueに設定した場合でも、同じ問題が発生します。何らかの理由で、データはthen関数内のスコープにバインドされていません。

これが繰り返しの質問である場合は申し訳ありませんが、私はどこを見ても、この場合は問題ではない$ promise関数に関連する未定義の問題のみを見つけました。

よろしくお願いします。

javascriptangularjsangularjs-scopeangular-resourceangular-promise
7
typemiguel

.then()に渡された関数は、データがバックエンドからフェッチされた後に呼び出されます。もう一方のconsole.log()（.then()の外側にあるもの）は要求が行われた直後、および要求が行われた後ではない）と呼ばれます。 completeしたがって、tasksは未定義です。

タイミングを考慮してください（もちろん、時間は単なる例です）：

// time = 0.000 sec. You make a request to the backend
$scope.test = Tests.get({id: 1});

$scope.test.$promise.then(function(data) {
    // time = 1.000 sec. Request is completed. 
    // data is available, so you assign it to $scope.tasks
    $scope.tasks = data.tasks;
    console.log($scope.tasks);
});

// time = 0.000 sec (!!!) This has been called NOT AFTER
// the callback, but rather immediately after the Tests.get()
// So the data is not available here yet.
console.log($scope.tasks);
13
kamituel

これは約束なので、$ scope.task afterを設定します。そのリターンが発生するまで、$ scope.taskは未定義です。これは、2番目のconsole.logが示しているものです。しばらくすると、promiseが解決され（完了し）、$ scope.taskに値が設定されます。これは、最初のconsole.logに表示される値です。

3
JerryKur
$scope.test.$promise.then(function(data) {

if(data){    
$scope.tasks = data.tasks;
}

console.log($scope.tasks);
});

これを試して

2
Khurshid Imran

このコードは、データをフェッチしてpromiseで解決するのに役立ちます。データのフェッチは、呼び出した後にのみ機能することに注意してください...

getData(){
      const promise = this.httpClient.get(this.PHP_API_SERVER+'/api/books').toPromise();  
      promise.then((data)=>{
        console.log("Resolved: " + JSON.stringify(data));
        return JSON.stringify(data);
      }, (error)=>{
        console.log("Rejected " + JSON.stringify(error));
      })
    }
0
lucasvm1980