すべてのデータがロードされるまで待ちます。 AngularJS

Question

私はJASONファイルからDATAを呼び出すコードを書いています。 私は非同期の問題を抱え、同じ問題について多くの記事を見ました。

私はそれが私の問題を解決すると思ういくつかのコードを書いた。 しかし、まだデータが読み込まれていないようです。

私はより具体的に私の質問になります。私は以下の約束の方法を使用した。すべてのデータが完全に読み込まれる前に「質問」が返されるべきではないと私は考えました。明らかに、内部に何もない「質問」は私のページに返されます。

私の約束方法は正しいですか？どうすればこの問題を解決できますか？ 誰か助けてくれますか？

(function(){ 

angular 
    .module("GrammarQuiz") 
    .factory("DataService", DataFactory); 
    function DataFactory($log, $q, $http, $timeout){ 
     var vm = this 
     var questions = getData() ; 
     vm.getData = getData; 

     function getData(){ 
      var defer = $q.defer() 
      $http.get('api/data1.json') 
      .success(function(res){ 
       questions = res; 
       $log.log('success'); 
       defer.resolve(res); 
      }) 
      .error(function(err, status){ 
       $log.log('fail'); 
       defer.reject(err); 
      }) 
      return defer.promise; 
     } 


     $log.log('check'); 
     $log.log(questions[0]); 

     return questions; 
    } 


})(); 

Answer 1

あなたが示したことは、約束を使用する適切な方法ではありません。代わりに、次のような何かやるべきこと：

工場（サービス）

.factory("DataService", DataFactory); 

function DataFactory($http) { 
    var service = {}; 
    service.getData = function() { 
     return $http.get('api/data1.json') 
      .then(function(response) { 
       return response.data; 
      }); 
     }; 
    return service; 
} 

コントローラーを

.controller("MyController", MyController); 

function MyController($scope, DataService) { 
    $scope.questions = {}; // or $scope.questions = []; if the return type is an array 
    DataService.getData() 
     .then(function(data) { 
      $scope.questions = data; 
     }) 
     .catch(function(errorResponse) { 
      // do something with the error 
     }); 
} 

私は、非同期からの応答を返すにはどうすればよい[の

Answer 2

投稿で提案したように、ここに非同期コードに関するいくつかの問題があります。

最初の問題は、このコードではまだ存在していないデータを記録しようとしているということです。

$log.log(questions[0]) 

これは、データが「hasn明らかにしてデータを取得するために、すぐに要求した後に実行されていますまだロードされていません。コンソールには何が印刷されますか？おそらくundefinedか何か類似しているでしょう。

質問データをログに記録するには、$ http.get success関数でそのデータを記録する必要があります。

$http.get('api/data1.json') 
    .success(function(res){ 
     questions = res; 
     $log.log('success'); 
     $log.log(questions); 
     defer.resolve(res); 
    }) 

第二に、あなたは$q.deferを使用してPROMISを作成しているが、$http.getはすでに.success()機能で実行される約束を返すので、それは完全に不要です。だから、あなたのコードを簡略化するために余分な約束を取り除き、ただ$http.getを使用してください。

そして、.success()機能以外のどこのデータでもデータが利用できるとは限りません。