javascript - AngularJS 中的批处理/组合请求

Question

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

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

当前在我的 Controller 中，我将发出请求来加载每个子节点注释的数据并将它们填充到范围中。像这样的东西:

_.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>

这将导致对评论端点的三次调用。鉴于此:

如果在很短的时间内发生对同一 HTTP 端点的多个调用，浏览器是否会将其批量处理为一个请求，或者我应该编写一个拦截器来自己处理吗？

Answer 1

我会将 $http 调用移至他们自己的服务。好处是您可以根据需要在服务或 Controller 中使用它，并且可以根据需要多次使用它——如果您使用任何类型的 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