Question

Angular有没有办法避免重复http请求？正如您在上面的代码中所看到的，我正在打电话来检索产品的详细信息。事实是这个调用与一个按钮相关联...... 我会避免重复的电话。如果我点击详细产品按钮显然我不需要再次拨打我的服务....正确的方法是加载信息一次然后显示和隐藏;但我不知道如何在Angular上管理它。（我也不想从非常重要的产品中加载详细产品，我只想加载用户的clic需求，但只需加载一次）

$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;
        });

};

Answer 1

您可以在工厂中存储用户请求的每个项目，然后在执行ajax调用之前检查内容是否在工厂中。

   $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;
        }
    };

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

<强>更新

someFactory示例：

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

    var storedItems = [];

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

}]);

测试工厂：

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

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

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

希望它可以帮到你

UPDATE2 完整示例代码

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;
        }
    };

}]);

Answer 2

使用范围变量绑定第一个调用。

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

设置成功，因此服务器错误代码将介于200和299之间。然后，您可以根据$scope.wasCalled变量在视图中设置 ng-show 。

这是考虑到不同id调用的实现。

$scope.callIds = [];
$scope.wasCalled = function(id){
for ( var k = 0 ; k < $scope.callIds.length ; k++ ) 
    if ( $scope.callIds[k] == id ) 
        return true;
return false;
};
$scope.addCalled = function(id){
    $scope.callIds.push(id);
};
$scope.seeInfo= function(id){
    if ( $scope.wasCalled(id) == false ) {
    $http.get('/shop/getDetailInfo/'+id).
        success(function(data, status) {
            $scope.info = data.detailinfo;
            $scope.addCalled(id);
        });
    }
};

检查是否调用了指定的id，如果没有，请使用$ http调用并将id添加到list。

如何避免重复http请求angularJS

2 个答案: