AngularJS $ http請求裏面服務

Question

我試圖從一個服務中獲取一些數據到一個控制器，我不斷得到一個未定義的變量。

angular 
    .module("classes") 
    .service("MyService", function ($http) { 

     this.foo; 
     $http.get("/classes/all").then(function (response) { 
      this.fighters = response.data; 
      this.foo = this.fighters; 
      console.log(this.foo); 
     }); 
     console.log(this.foo); 

    }) 

當我運行這個控制檯時，按照這個順序，第11行是未定義的，然後第9行返回數組。

而當我在控制器中嘗試獲取變量foo時，它也表示未定義。

$scope.fooFighters = MyService.foo; 

Answer 1

代碼/功能的原因是因爲你的API調用的異步執行的。我建議你重寫代碼以使用將返回承諾對象的工廠。不需要帶來不必要的變量。

angular.module("classes").factory("MyService", function($http) { 
    return { 
     fighters: function() { 
      return $http.get("/classes/all").then(function(response) { 
       return response.data; 
      }); 
     } 
    } 
}) 

而在你的控制器，你可以通過引用它像

MyService.fighters().then(function(data){ 
    $scope.fooFighters = data; 
    }); 

Answer 2

因爲在第9行工作後需要一段時間才能加載ajax/http請求數據。所以，如果你想使用Ajax/HTTP數據進行工作，那麼你應該寫內部

$http.get("/classes/all").then(function (response) { 
     // do something 
    });