承诺的意外行为

Question

我在与 Factory/Service 合作时遇到了麻烦。我为我的所有 AJAX 调用创建了一个 AjaxRequests 工厂。我的工厂代码是

.factory('AjaxRequests', ['$http', function ($http) {
                return {
                    getCampaignsData: function () {
                        var campaigns
                        return $http.get(url).then(function (response) {
                            campaigns = response.data;
                            return campaigns;
                        });

                    }
                }
            }])

我创建了另一个服务，我在其中注入了这个工厂。我的服务代码

.service('CampaignsService', ['$rootScope', 'AjaxRequests', function ($rootScope, AjaxRequests) {
     this.init = function () {
     this.camps;
     AjaxRequests.getCampaignsData().then(function (response) {
       this.camps = response.campaigns;
       console.log(this.camps); // It is showing data
     })
     console.log(this.camps); // But it is not working :(
    };
   this.init();

}])

在我的控制器中

.controller('AdvanceSettingsController', ['$scope', 'CampaignsService', function ($scope, CampaignsService) {
                $scope.CampaignsService = CampaignsService;
            }
        ])

我已阅读此article 以了解承诺，但它在这里不起作用。我可以直接在控制器中实现它并且它工作正常。但它认为使控制器变粗是一种不好的编码标准。但是当我使用服务和工厂时，我卡住了。 我的问题是为什么我没有在我的整个服务中使用 ajax 数据？ 我需要在我的视图模板以及我的整个休息脚本中使用CampaignsService.camps，但每次我得到@987654327 @。这里发生了什么？我以前问过同样的问题，但没有成功。 请有人帮助我了解承诺以及如果我正在工作，为什么会出现这种类型的错误？这种类型的问题已经被问过before，但它在控制器中工作。可能是因为我在服务中使用它而被卡住了。

提前非常感谢。

Answer 1

这不是错误或一些棘手的功能。就像在任何其他 AJAX 实现中一样，您只能在 AngularJS 的 $http success 方法中访问响应数据。这是因为异步 JavaScript 和 XML 的异步特性。

你所拥有的正在发挥作用。

.controller('AdvanceSettingsController', ['$scope', 'AjaxRequests', function ($scope, AjaxRequests) {
        $scope.camps = [];
        AjaxRequests.getCampaignsData().then(function(data) {
             $scope.camps = data;
        });
    }
])

然后绑定camps:

<div ng-repeat="camp in camps>{{camp.name}}</div>

在您的实现中不好的是，您不是在服务中对相关内容进行分组，而是为所有内容编写了一个大的AjaxRequests 服务。你应该有一个 CampaignsService 有一个 getData 方法并将它注入你的控制器。

为什么会这样？因为$http 为您做了一个$scope.$apply，它在数据加载(then) 之后触发一个摘要循环并更新HTML。所以在then 回调之前ng-repeat 与[] 和after 一起运行它再次运行，但使用来自响应的数据，因为您正在设置$scope.camps = data;。

<div ng-repeat="camp in CampaignsService.camps>{{camp.name}}</div>不起作用的原因是function variable scoping。

then 回调内部的 this 引用与外部的 this 引用不同。

这将起作用并使用常见的var self = this 技巧：

var self = this;
this.camps = [];
this.init = function () {
    AjaxRequests.getCampaignsData().then(function (response) {
        // here "this" is not the one from outside.
        // "self" on the other hand is!
        self.camps = response.campaigns;
    });
};