AngularJS中的批處理/組合請求

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>

這將導致對注釋端點的三個調用。 鑒於這種：

如果瀏覽器在短時間內發生對同一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，並通過批處理和緩存減少對這些后端的請求。