在 AngularJS 服务中缓存一个承诺对象

Question

我想使用 Promises 在 AngularJS 中实现静态资源的动态加载。问题：我在页面上有几个组件可能（或不，取决于显示的，因此是动态的）需要从服务器获取静态资源。加载后，可以在整个应用程序生命周期内进行缓存。

我已经实现了这个机制，但是我是 Angular 和 Promises 的新手，我想确定这是否是一个正确的解决方案\方法。

var data = null;
var deferredLoadData = null;

function loadDataPromise() {
  if (deferredLoadData !== null)
    return deferredLoadData.promise;

  deferredLoadData = $q.defer();

  $http.get("data.json").then(function (res) {
    data = res.data;
    return deferredLoadData.resolve();
  }, function (res) {
    return deferredLoadData.reject();
  });

  return deferredLoadData.promise;
}

因此，只发出了一个请求，接下来对 loadDataPromise() 的所有调用都会取回第一个做出的承诺。它似乎适用于正在进行中或前一段时间已经完成的请求。

但是缓存 Promises 是不是一个好的解决方案？

Answer 1

这种设计模式将缓存第一次运行时返回的内容，并在每次再次调用时返回缓存内容。

const asyncTask = (cache => {
  return function(){
    // when called first time, put the promise in the "cache" variable
    if( !cache ){
        cache = new Promise(function(resolve, reject){
            setTimeout(() => {
                resolve('foo');
            }, 2000);
        });
    }
    return cache;
  }
})();

asyncTask().then(console.log);
asyncTask().then(console.log);

解释：

简单地用另一个返回函数的自调用函数（你原来的异步函数）包装你的函数，包装函数的目的是为局部变量cache提供封装范围，以便局部变量只能访问在包装函数的返回函数中，并且每次调用 asyncTask 时具有完全相同的值（第一次除外）

Answer 2

对于这个任务，我创建了名为 defer-cache-service 的服务，它删除了所有这些样板代码。它是用 Typescript 编写的，但你可以获取编译后的 js 文件。 Github source code.

例子：

function loadCached() {
   return deferCacheService.getDeferred('cacke.key1', function () {
      return $http.get("data.json");
   }); 
} 

消费

loadCached().then(function(data) {
//...
});

需要注意的重要一点是，如果假设两个或多个部分同时调用相同的 loadDataPromise，则必须添加此检查

if (defer && defer.promise.$$state.status === 0) {
   return defer.promise;
}

否则您将重复调用后端。

Answer 3

这是正确的方法吗？

是的。在返回的函数上使用memoisation 保证了一种通用技术，可以避免重复执行异步（通常是昂贵的）任务。 Promise 使缓存变得容易，因为不需要区分正在进行的操作和已完成的操作，它们都表示为（相同的）结果值的 Promise。

这是正确的解决方案吗？

没有。全局data 变量和undefined 的分辨率并不是promise 的预期工作方式。相反，用结果data 来履行承诺！它还使编码变得更加容易：

var dataPromise = null;

function getData() {
    if (dataPromise == null)
        dataPromise = $http.get("data.json").then(function (res) {
           return res.data;
        });
    return dataPromise;
}

那么，不是loadDataPromise().then(function() { /* use global */ data })，而是简单的getData().then(function(data) { … })。

为了进一步改进该模式，您可能希望在闭包范围内隐藏dataPromise，并注意当getData 采用参数（如url）时，您需要查找不同的promise。