代码之家 › 专栏 › 技术社区 › Jimenemex

在helper工厂中使用angularjs$q promises

deferred asynchronous angularjs javascript

Jimenemex · 技术社区 · 5 年前

这个问题已经有了答案:

Caching a promise object in AngularJS service 3答

我正试着在什么时候使用 $q 在安格拉斯。到目前为止,我在所有的服务中都使用它,当我调用我们的web api时,它工作得很好。我要做的是减少对api的所有调用,因为我在多个地方需要相同的数据,而且我每次需要数据时都在ping api。

现在我有一个服务,它获取数据和一个帮助文件来帮助处理有关数据的相关事情。

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

如果在angularjs运行时,数据还没有返回给我,那么我很难在分配helper文件中的数据值时绞尽脑汁。

这就是我目前所拥有的。

(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 .

我需要换什么 笨蛋 控制器 $scope.value 是从 githubService.getAccount() ?

1 回复 | 直到 5 年前

Petr Averyanov 5 年前

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

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) {})
...

-1

Leroy Stav 5 年前

你是几乎那里。问题是 githubinfo 只有在你访问之后才会被填充。你应该做的几乎就是(见我上面的评论)你在做什么 githubservice.getaccount ,但在 githubhelper.getaccount 相反。集合 吉瑟宾福 到A $q.deferred 返回 githubinfo.promise 从GetAccount,并在 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 可以并且应该处理这一点,但是你应该能够得到沿着这些线的东西的一般要点。能够工作