如何避免重复http请求angularJS

Question

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

$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

Angular $http 内置缓存功能，可能就是您所需要的

https://docs.angularjs.org/api/ng/service/$http

$scope.seeInfo= function(id){

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

};

更新

我看到您选择了 "roll your own" 解决方案，这通常比使用 angular 提供的解决方案更容易出错。

这里是如何实现相同的：

// access the $http cache 
var httpCache = $cacheFactory('$http');
// retrieve an element from cache
var detailInfo = httpCache.get('/shop/getDetailInfo/' + id);
// delete a cache element
httpCache.remove('/shop/getDetailInfo/' + id);

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 添加到列表中。

Answer 3

您可以将用户请求的每个项目存储在工厂中，然后在执行 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;
        }
    };

}]);

如何避免重复http请求angularJS

How to avoid repeating http requests angularJS

javascript

httprequest

angularjs