如何避免重复的http请求angularJS

问题描述

是否有角的方式来避免重复http请求？
正如你可以在code见上面我正在打电话来检索产品的详细信息。
事实是，这个呼叫被关联到按钮...
我想，以避免重复调用。
如果我点击了详细的产品按钮显然我并不需要再次拨打电话给我的服务....适当的方式将是一次加载信息，然后显示与墙根;但我不知道如何对角进行管理。
（我也不想从scrach非常加载产品细节的产品，我想只加载用户的需求CLIC，但一次）

  $ scope.seeInfo =功能（ID）{    $ http.get（'/店/ getDetailInfo /'+ id）的。
        成功（功能（数据，状态）{
            $ scope.info = data.detailinfo;
            如果（data.detailinfo大于0）$ scope.showDetails = TRUE;
            否则$ scope.showDetails = FALSE;
        }）;};
 

解决方案

您可以存储每一个项目，如果含量在工厂做Ajax调用之前在一家工厂，然后将用户请求确认。

  $ scope.seeInfo =功能（ID）{
        变种detailinfo = someFactory.get（ID）; //从工厂获得项目的数据，如果存在
        如果（angular.isUndefined（detailinfo）|| detailinfo === NULL）{
            $ http.get（'/店/ getDetailInfo /'+ id）的。
                成功（功能（数据，状态）{
                    someFactory.set（ID，数据）; //设置AJAX数据工厂
                    $ scope.info = data.detailinfo;
                    如果（data.detailinfo大于0）$ scope.showDetails = TRUE;
                    否则$ scope.showDetails = FALSE;
                }）;
            }
        }其他{
            $ scope.info = detailinfo;
            如果（detailinfo大于0）$ scope.showDetails = TRUE;
            否则$ scope.showDetails = FALSE;
        }
    };
 

除了有人说，你可以使用$ HTTP缓存，但我不知道它到底是如何工作

更新

一个someFactory例如：

  .factory（'someFactory'，[功能（）{    变种storedItems = [];    返回{
        得到：函数（ID）{
            返回storedItems [ID]
        }，
        设置：功能（ID，数据）{
            storedItems [ID] =数据;
        }
    };}]）;
 

测试工厂：

  someFactory.set（12345，{信息：你好}）;
someFactory.set（2，世界）;的console.log（someFactory.get（12345）.INFO）; //返回你好
的console.log（someFactory.get（2））; //返回世界
 

您可以存储字符串，对象....

希望它可以帮助你。

UPDATE2 完整的例子code

  VAR someApp = angular.module（someApp，[]）.controller（'someCtrl'，['someFactory'，函数（someFactory）{  someFactory.set（12345，{信息：你好}）;
  someFactory.set（2，世界）;  的console.log（someFactory.get（12345）.INFO）; //返回你好
  的console.log（someFactory.get（2））; //返回世界}]）。工厂（'someFactory'，[功能（）{    变种storedItems = [];    返回{
        得到：函数（ID）{
            返回storedItems [ID]
        }，
        设置：功能（ID，数据）{
            storedItems [ID] =数据;
        }
    };}]）;
 

Is there a way in Angular to avoid repeating http requests?As you can see in the code above I'm making a call to retrieve the detailed info of a product.The fact is that this call is associated to a button...I would to avoid repetitive calls.If I have clicked on the detailed-product-button obviously I don't need to make a call again to my service....the proper way will be to load the info once and then show and hided; but I don't know how to manage this on Angular.(also I don't want to load the detail product from the scrach for very product, I want to loaded only on user's clic demand, but once)

$scope.seeInfo= function(id){

    $http.get('/shop/getDetailInfo/'+id).
        success(function(data, status) {
            $scope.info = data.detailinfo;
            if (data.detailinfo>0) $scope.showDetails=true;
            else $scope.showDetails=false;
        });

};

解决方案

You can store every item that the user request in a factory and then check if the content is in the factory before do the ajax call.

   $scope.seeInfo= function(id){
        var detailinfo = someFactory.get(id); //get item data from factory if exist
        if (angular.isUndefined(detailinfo) || detailinfo === null) {
            $http.get('/shop/getDetailInfo/'+id).
                success(function(data, status) {
                    someFactory.set(id, data); //set ajax data to factory
                    $scope.info = data.detailinfo;
                    if (data.detailinfo>0) $scope.showDetails=true;
                    else $scope.showDetails=false;
                });
            }
        } else {
            $scope.info = detailinfo;
            if (detailinfo>0) $scope.showDetails=true;
            else $scope.showDetails=false;
        }
    };

As well as someone said you can use the $http cache but i don't know how really it works

UPDATE

A someFactory example:

.factory('someFactory', [function() {

    var storedItems = [];

    return {
        get: function(id) {
            return storedItems[id];
        },
        set: function(id, data) {
            storedItems[id] = data;
        }
    };

}]);

test the factory:

someFactory.set(12345, {"info":"Hello"});
someFactory.set(2, "World");

console.log(someFactory.get(12345).info); // returns Hello
console.log(someFactory.get(2)); //returns World

You can store strings, objects....

Hope it helps you

UPDATE2 FULL EXAMPLE CODE

var someApp = angular.module("someApp", [])

.controller('someCtrl', ['someFactory', function(someFactory) {

  someFactory.set(12345, {"info":"Hello"});
  someFactory.set(2, "World");

  console.log(someFactory.get(12345).info); // returns Hello
  console.log(someFactory.get(2)); //returns World

}]).factory('someFactory', [function() {

    var storedItems = [];

    return {
        get: function(id) {
            return storedItems[id];
        },
        set: function(id, data) {
            storedItems[id] = data;
        }
    };

}]);

这篇关于如何避免重复的http请求angularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！