javascript - 在 AngularJS 服务中缓存一个 promise 对象

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() 的调用都会取回第一个做出的 promise 。它似乎适用于正在进行的请求或一段时间前已经完成的请求。

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

Answer 1

Is this the right approach?

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

Is this the right solution?

没有。全局 data 变量和 undefined 的解析并不是 promise 的预期工作方式。相反，用结果 data 来履行 promise !它还使编码更容易:

var dataPromise = null;

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

然后，不是 loadDataPromise().then(function() {/* 使用全局 */数据 }) 它只是 getData().then(function(data) { ... })。

为了进一步改进模式，您可能希望将 dataPromise 隐藏在闭包范围内，并注意当 getData 接受参数时您需要查找不同的 promise (如网址)。