javascript - 获取过滤器来处理 promise 的服务

Question

我已经开始修改此代码以同步操作，但出于好奇和支持这两种方式的愿望，我需要一些帮助来理解如何让过滤器与 promise 一起运行。正如其他一些帖子提到的那样，过滤器似乎只是从 Promise 解析为 {}。

基本模式

这是一个分割:

1. 在模块中定义一个返回 Promise 而不是对象的服务

   module.factory('promisedSvc', ['$http', function($http) {
   
     var httpPromise = null,
       servicePromise = null,
       service = {},
       dataSet = {};
   
     var httpPromise = $http.get('somedata.json').success(function(data) {
       dataSet = data;
     });
   
     servicePromise = httpPromise.then(function(){
       service.getData = function(key) {
         return dataSet[key];
       };
   
       service.addData = function(key, value) {
         dataSet[key] = value;
       };
   
       return service;
     });
   
     /*
       In actuality I proxied the service methods onto the promise because
       I didn't want consumers of the service to have to deal with it being
       a promise. There is the caveat of setting properties on a class I 
       don't own (property collisions), a risk I'm okay taking, but YMMV
   
       Commented out proxies
       servicePromise.getData = function(key) {
         return this.then(function(svc){
           return svc.getData(key);
         });
       };
   
       servicePromise.addData = function(key, value) {
         this.then(function(svc){
           svc.addData(key, value);
         });
       };
     */
   
     return servicePromise;
   }]);
   

2. Controller 可以很好地处理这个promisedSvc，您只需将 Promise 注入(inject)到 Controller 中，然后在 Promise 上使用 then 函数来包装设置最终服务对象上的函数调用的 $scope 属性:getData(key) 或 setData(key, value)。或者，如果您将函数代理到 Promise 上，就像注释掉的 block 中一样，您也可以将其视为正常。

3. 过滤器似乎并不像 $scope 那样本质上处理 promise 。我正在寻找一种方法让过滤器注入(inject) promisedSvc 并能够调用 getData(key) 而无需解析为 {}因为 promise 还没有解决。以下是无效的示例:

   module.filter('svcData', ['promisedSvc', function(promisedSvc) {
     return function(input) {
   
       return promisedSvc.then(function(svc) {
         var value = svc.getData(input);
         return value;
       });
     };
   }]);
   

那么有没有办法编写过滤器来解析该值？

用例

这就是我想要实现的简化模式。对于那些好奇的人，我的实际用例是预获取 i18n/l10n 资源包信息，以便我可以本地化应用程序中的所有文本。预取都可以在 Javascript 环境中进行(附加到一些已加载的全局或提供程序中)，但我们也有数据库存储的资源包的场景，所以我需要一个可以预取所有信息的代码版本通过 AJAX 从服务器获取。

Answer 1

这不完全是我正在寻找的，但至少记录了一个解决方法:

可以在 $scope 上使用函数而不是过滤器。

module.factory('promisedSvc', ['$http', '$rootScope', function($http, $rootScope) {

  var httpPromise = null,
    servicePromise = null,
    service = {},
    dataSet = {};

  var httpPromise = $http.get('somedata.json').success(function(data) {
    dataSet = data;
  });

  servicePromise = httpPromise.then(function(){
    service.getData = function(key) {
      return dataSet[key];
    };

    service.addData = function(key, value) {
      dataSet[key] = value;
    };

    //Here is the addition to setup the function on the rootScope
    $rootScope.svcData = function(key) {
      return service.getData(key);
    };

    return service;
  });

  return servicePromise;
}]);

然后在模板中而不是 {{ 'key1' | svcData }} 您将使用 {{ svcData('key1') }}

我测试过，如果您延迟 promise 解析(例如在 $http.success 中设置等待)，则会影响页面加载，但 svcData 函数中的值只会填充一旦 promise 解决，就进入模板。

如果可能的话，使用过滤器来完成同样的任务还是很好的。