服务内部的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调用异步执行。我建议您重写代码以使用将返回promise对象的工厂。无需带来不必要的变量。

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;
  });