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 行 returns 我是数组。

当我在控制器中尝试获取变量 foo 时，它也显示未定义。

$scope.fooFighters = MyService.foo;

Answer 1

因为在第 9 行生效后加载 ajax/http 请求数据需要一些时间。所以如果你想使用 ajax/http 数据，那么你应该在

里面写 code/function

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

Answer 2

原因是您的 API 调用异步执行。我建议您重写代码以使用将 return 承诺对象的工厂。无需带上不必要的变量。

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

AngularJS $http 服务内部请求

AngularJS $http request inside service

javascript

http

angularjs

angularjs-service