如何让控制器等待从角度服务解决的承诺

Question

我有一个服务正在向后端发出 AJAX 请求

服务：

    function GetCompaniesService(options)
    {
        this.url = '/company';
        this.Companies = undefined;
        this.CompaniesPromise = $http.get(this.url);

    }

控制器：

var CompaniesOb = new GetCompanies();
CompaniesOb.CompaniesPromise.then(function(data){
   $scope.Companies = data;
});

我希望我的服务处理“.then”函数，而不是必须在我的控制器中处理它，并且我希望能够让我的控制器在服务内部的承诺之后对来自服务的数据采取行动已解决。

基本上，我希望能够像这样访问数据：

var CompaniesOb = new GetCompanies();
$scope.Companies = CompaniesOb.Companies;

在服务本身内部处理承诺的解决方案。

这可能吗？还是我可以从服务外部访问该承诺的解决方案的唯一方法？

Answer 1

如果您只想在服务本身中处理$http 的响应，则可以将then 函数添加到服务中，然后从then 函数中进行更多处理然后return，就像这样：

function GetCompaniesService(options) {
  this.url = '/company';
  this.Companies = undefined;
  this.CompaniesPromise = $http.get(this.url).then(function(response) {
    /* handle response then */
    return response
  })
}

但您仍然可以在控制器中使用 promise，但您返回的内容已经在服务中处理。

var CompaniesOb = new GetCompanies();
CompaniesOb.CompaniesPromise.then(function(dataAlreadyHandledInService) {
  $scope.Companies = dataAlreadyHandledInService;
});

Answer 2

做到这一点没有问题！

您必须记住的主要事情是，您必须在服务中保持相同的对象引用（在 javascript 数组中是对象）。

这是我们的简单 HTML：

<div ng-controller = "companiesCtrl"> 
  <ul ng-repeat="company in companies">
     <li>{{company}}</li>
  </ul>
</div>

这是我们的服务实现：

serviceDataCaching.service('companiesSrv', ['$timeout', function($timeout){
  var self = this;

  var httpResult = [
    'company 1',
    'company 2',
    'company 3'
  ];

  this.companies = ['preloaded company'];
  this.getCompanies = function() {
    // we simulate an async operation
    return $timeout(function(){
      // keep the array object reference!!
      self.companies.splice(0, self.companies.length);

      // if you use the following code:
      // self.companies = [];
      // the controller will loose the reference to the array object as we are creating an new one
      // as a result it will no longer get the changes made here!
      for(var i=0; i< httpResult.length; i++){
        self.companies.push(httpResult[i]);
      }
      return self.companies;
    }, 3000);                    
}}]);   

最后是你想要的控制器：

serviceDataCaching.controller('companiesCtrl', function ($scope, companiesSrv) {
  $scope.companies = companiesSrv.companies;
  companiesSrv.getCompanies();
});

说明

如上所述，诀窍是保持服务和控制器之间的引用。一旦尊重这一点，您就可以将控制器范围完全绑定到服务的公共属性上。

Here a fiddle that wraps it up.

在代码的 cmets 中，您可以尝试取消注释不起作用的部分，您将看到控制器如何丢失引用。事实上，控制器将继续引用旧数组，而服务将更改新数组。

最后一件重要的事情：请记住，$timeout 会触发 rootSCope 上的 $apply()。这就是我们的控制器作用域“单独”刷新的原因。没有它，如果你尝试用普通的 setTimeout() 替换它，你会看到控制器没有更新公司列表。 要解决此问题，您可以：

• 如果您的数据是使用 $http 获取的，则不要执行任何操作，因为它会在成功时调用 $apply
• 换行会导致 $timeout(..., 0);
• 在服务中注入 $rootSCope 并在异步操作完成时对其调用 $apply()
• 在控制器中添加 $scope.$apply() 到 getCompanies() 承诺成功

希望这会有所帮助！

Answer 3

您可以将 $scope 传递给 GetCompanies 并将 $scope.Companies 设置为服务中的数据

 function GetCompaniesService(options,scope)
 {
    this.url = '/company';
    this.Companies = undefined;
    this.CompaniesPromise = $http.get(this.url).then(function(res) {
      scope.Companies = res;
    });

 }

您必须注意随后使用数据的顺序。这就是一开始就做出承诺的原因。