Question

我有一个AngularJS应用程序，它有很多指令，这些指令是从AJAX请求中的嵌套节点填充的。例如，我可能得到如下响应：

{
  name: "Blog post title",
  comment_ids: [1, 2, 3]
}

目前在我的控制器中，我将请求为每个子节点注释加载数据并将它们填充到范围内。类似的东西：

_.each(comment_ids, function(id) {
    scope.comment_data[id] = $http.get(id); // psuedocode for the $get
});

然后我使用页面上的数据，如：

<comment data="comment_data.1"></comment>

这很好但我正在考虑将我的指令转换为id而不是对象并处理数据本身。我面临的问题是，如果页面上多次存在相同的指令，我可能会向同一个端点发出多个请求，例如

<comment id="1"></comment>
<comment id="1"></comment>
<comment id="1"></comment>

这将导致对comments端点的三次调用。鉴于此：

如果浏览器在很短的时间内发生，那么浏览器会将对同一HTTP端点的多次调用批量处理为一个请求，还是应该编写一个拦截器来自行处理？

Answer 1

我会将$ http调用移动到他们自己的服务中。好处是您可以根据需要在服务或控制器中使用它，并根据需要多次使用 - 如果您使用任何类型的JS控制的缓存，这将非常有用。

我正在为SharePoint 2010/2013 REST调用开发AngularJS oData服务，该调用使用localStorage来缓存结果，并仅从服务器获取更新。当我一遍又一遍地调用相同的数据时，这种方法效果特别好，它只是从localStorage中获取而没有进行HTTP调用。

// Pseudo code to put in a service
var persistentCache = function (query) {

    return localStorage[query] ? {
        'then': function (callback) {
            callback(JSON.parse(localStorage[query]));
        }
    } : $http(query).then(function (resp) {
        return localStorage[query] = JSON.stringify(resp);
    });

};

或者，您可以使用模块设计模式在应用程序的生命周期内缓存您的调用，并且仅在应用程序缓存中没有时才进行提取。

// Pseudo code to put in a service
var appOnlyCache = (function () {

    var _cache = {};

    return function (query) {

        return _cache[query] ? {
            'then': function (callback) {
                callback(JSON.parse(_cache[query]));
            }
        } : $http(query).then(function (resp) {
            return _cache[query] = JSON.stringify(resp);
        });

        };

}());

这两个示例都具有更强大的压缩和实现功能。错误处理可以在我正在为应用程序处理的AngularSharepoint服务中找到：AngularSharepoint

Answer 2

现在使用https://github.com/facebook/dataloader

非常优雅地解决了这个问题

DataLoader是一个通用实用程序，可用作您的一部分应用程序的数据提取层提供一致的API 各种后端并通过批处理减少对这些后端的请求和缓存。

AngularJS中的批处理/组合请求

2 个答案: