javascript - 服务内部的 AngularJS $http 请求

Question

我试图从服务中获取一些数据到 Controller 中，但我一直得到一个 undefined variable 。

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 行返回数组给我。

当我在 Controller 中尝试获取变量 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;
            });
        }
    }
})

在你的 Controller 中，你可以通过在 Controller 中注入(inject)服务然后像这样引用它来获取值

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