在帮助工厂中使用AngularJS $ q promises [复制]

Question

这个问题在这里已有答案：

• Caching a promise object in AngularJS service 3回答

我试图在AngularJS中使用$q。到目前为止，我一直在我的所有服务中使用它，所以当我调用我们的Web API时它很好用。我正在尝试做的是减少对API的所有调用，因为我需要在多个地方使用相同的数据，而且每次我需要数据时我都在ping API。

现在我有一个服务，它获取数据和帮助文件，以帮助处理有关数据的相关信息。

我想要的是使用这个助手factory来保存每个使用它的身体所需的数据。

如果在AngularJS运行时数据还没有回复给我，那么我无法绕过辅助文件分配数据的值。

这就是我到目前为止所拥有的。

(function() {
  var app = angular.module("Test", []);
  app.service("githubService", function($http, $q) {
    var deferred = $q.defer();

    this.getAccount = function() {
      return $http.get('https://api.github.com/users/JonDoe');
    };
  });

  app.factory("githubHelper", ["githubService", function(githubService) {
    _gitHubInfo = {};

    githubService.getAccount().then(function(data) {
      _gitHubInfo = data;
    });

    return {
      gitHubInfo: _gitHubInfo
    };
  }]);

  app.controller("Dummy", ["$scope", "githubHelper", "githubService", function($scope, githubHelper, githubService) {
    
    // How do I make it work this way?
    $scope.value = githubHelper.gitHubInfo;
    
    // This is what I'm using now
    githubService.getAccount().then(function(data) {
      $scope.value2 = data;
    });
  }]);
})();

.box {
  border: 1px red solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="Test">
  <div ng-controller="Dummy">
    <div class="box">
      {{value}}
    </div>
    <br />
    <div class="box">
      {{value2}}
    </div>
  </div>
</div>

我想要做的只是从githubService控制器中删除Dummy依赖项，并且只将它存在于githubHelper工厂中，这样我就可以从所有控制器中删除对githubService的依赖，而是使用gitHubHelper。

我需要在Dummy控制器中更改$scope.value是从githubService.getAccount()返回的数据吗？

Answer 1

我的项目中有这样的东西：

app.factory("githubHelper", ["githubService", function(githubService) {
    var promise = null;

    function getInfo() {
      if (!promise) {
        promise = githubService.getAccount();
      }
      return promise;
    }

    return {
      getInfo: getInfo
    };
  }]);

githubHelper.getInfo().then(function(data) {})
githubHelper.getInfo().then(function(data) {})
githubHelper.getInfo().then(function(data) {})
...

Answer 2

你快到了。问题是githubinfo在您访问之前不会填充。你应该做的几乎就是（参见上面的评论）你正在做什么githubservice.getaccount，但在githubhelper.getaccount，而不是。将githubinfo设置为$q.deferred，从getaccount返回githubinfo.promise，并解决then中的承诺

更新：现在有更多代码！ （现在我不在手机上:-D）

(function() {
  var app = angular.module("Test", []);
  app.service("githubService", function($http, $q) {
    this.getAccount = function() {
      return $http.get('https://api.github.com/users/JonDoe');
    };
  });

  app.factory("githubHelper", ["githubService", function(githubService) {
    return {
      gitHubInfo: $q(function(resolve, reject) {
        githubService.getAccount().then(function(data) {
          resolve(data);
        }, reject);
      }
    };
  }]);

  app.controller("Dummy", ["$scope", "githubHelper",
    function($scope, githubHelper) {

      githubHelper.gitHubInfo.then(function(data) {
        $scope.value = data;
      });

  }]);
})();

现在，按原样编写，我永远不会认为这是一个公关，原因很多（代码清晰度：return { someProp: function() { /* a bunch of code */} } ......应该不惜一切代价避免使用$scope ......如上所述，$cacheFactory可以而且应该处理这个问题），但你应该能够得到关于这些方面的东西如何起作用的一般要点