AngularJS 1.5.0の$ http.get（）で空の戻り値を取得する

Question

私はAngularJSアプリケーションでファクトリを作成しました。これは、1つまたは複数の要素で削除が実行された後にサーバーからリフレッシュされたデータを取り込むために使用されます。リスト。

var myApp = angular.module('app'); 
myApp.factory('mvListRefresher', function($http) { 
    return { 
     refreshCourses : function() { 
      var list = new Array(); 
      $http.get('/api/courses').then(function(response) { 
       console.log('got refreshed lists'); 
       console.log(response.data); 
       list = response.data; 
      }, function(error) { 
       console.log('error in retreiving fresh lists'); 
       console.log(error); 
      }); 

      console.log('Displaying list of courses'); 
      console.log(list); 
      if(list.length != 0) { 
       return list; 
      } 
     } 
    } 
}); 

は私が

$scope.courses = mvListRefresher.refreshCourses(); 

を呼び出すことによって、私のコントローラのいずれかで、この工場を呼んでいる。しかし、私は、私はまったくの戻り値が届かないすなわち、空のリストを取得しています。私の工場の機能で、私はしかし、ライン正しくオブジェクトの完全なリストから成功のコールバックプリントの内側にある

console.log(response.data); 

、ライン

console.log(list); 

は常に空の配列を出力することを観察しました。私はこれがどのように起こっているのか分かりません。 AngularJSの約束は比較的新しいもので、それは非同期の方法とアーキテクチャです。親切に私を助けてください。それ以上の情報が必要な場合は、私はそれを提供します。私は平均を使ってアプリ全体をやった。前もって感謝します！

Answer 1

$httpリクエストは本質的に非同期なので、listを返す時点でリクエストはまだ完了していません。あなたは、この応答にJavaScriptで非同期の一般的な概念についての詳細を読むことができます：https://stackoverflow.com/a/14220323/704894

あなたの代わりに何をすべきリストの約束を返すです：

myApp.factory('mvListRefresher', function($http) { 
    return { 
     refreshCourses: function() { 
      return $http.get('/api/courses').then(function(response) { 
       return response.data; 
      }); 
     } 
    }; 
}); 

$http方法は、結果の約束を返します。その後、次の方法でこの機能を使用することができます。

mvListRefresher.refreshCourses().then(function (list) { 
    $scope.courses = list; 
}); 

あなたは$http documentationでそれについての詳細をお読みください。