在 AngularJS 服务中缓存承诺对象 [英] Caching a promise object in AngularJS service

问题描述

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

I want to implement a dynamic loading of a static resource in AngularJS using Promises. The problem: I have couple components on page which might (or not, depends which are displayed, thus dynamic) need to get a static resource from the server. Once loaded, it can be cached for the whole application life.

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

I have implemented this mechanism, but I'm new to Angular and Promises, and I want to make sure if this is a right solution \ approach.

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

So, only one request is made, and all next calls to loadDataPromise() get back the first made promise. It seems to work for request that in the progress or one that already finished some time ago.

但是缓存 Promise 是一个好的解决方案吗?

But is it a good solution to cache Promises?

推荐答案

这是正确的方法吗?

Is this the right approach?

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

Yes. The use of memoisation on functions that return promises a common technique to avoid the repeated execution of asynchronous (and usually expensive) tasks. The promise makes the caching easy because one does not need to distinguish between ongoing and finished operations, they're both represented as (the same) promise for the result value.

这是正确的解决方案吗?

Is this the right solution?

没有.全局 data 变量和 undefined 的解析不是 Promise 的工作方式.相反，用结果 data 履行承诺！它还使编码更容易:

No. That global data variable and the resolution with undefined is not how promises are intended to work. Instead, fulfill the promise with the result data! It also makes coding a lot easier:

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

Then, instead of loadDataPromise().then(function() { /* use global */ data }) it is simply getData().then(function(data) { … }).

为了进一步改进模式，您可能希望在闭包作用域中隐藏 dataPromise，并注意当 getData 接受一个参数时，您将需要查找不同的承诺(如网址).

To further improve the pattern, you might want to hide dataPromise in a closure scope, and notice that you will need a lookup for different promises when getData takes a parameter (like the url).

这篇关于在 AngularJS 服务中缓存承诺对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！