Question

我为$ http服务创建了一个角度工厂。我得到了响应并且能够在控制器中使用相同但问题是，当我检查浏览器中的网络选项卡时，http请求被进行两次

厂：

app.factory('myService', function ($http, $q) {

var deferred = $q.defer();
var responseData = null;
var obj = {};

obj.getData = function(){
    $http.get('test.json').success(function(response){
        responseData = response;
        deferred.resolve(responseData);
    }).error(function(response){
        deferred.reject(responseData);
    });

    return deferred.promise;
}

obj.myData = function(){
    return responseData;
}

return obj;
});

控制器：

app.controller('myController', function($scope,myService){

myService.getData().then(function(){
   $scope.myDetails = myService.myData();
});

});

我的做法有什么不对。请给我一个解决方案

Answer 1

您制作缓存方案的方式非常复杂，并没有多大帮助。你怎么知道数据是否已被加载？

也许您可以创建一个简单的缓存服务来处理单点缓存（代码行数将会下降）。

angular.module("YourApp").factory("CachingService", [
    "$q",
    "$http",
    function ($q, $http,) {
        var cache = {};

        return {
            getFromCache: getFromCache
        };


        function getFromCache(url) {
            var deferred = $q.defer();

            if (cache[url]) {
                deferred.resolve(cache[url]);
            } else {
                return $http.get(url).then(function (result) {
                    cache[url] = result;
                    return result;
                });
            }
            return deferred.promise;
        }
     }
 ]);

然后，您只需在其他服务中调用它：

angular.module("YourApp").factory("myService", [
    "CachingService",
    function(CachingService){
        return {
             getData: getData
        };

        function getData(){
            return CachingService.getFromCache("test.json");
        }
    }
]);

然后，在你的控制器内：

app.controller('myController', function($scope,myService){

    myService.getData().then(function(result){
       $scope.myDetails = result.Data;
    });

});

Answer 2

您可以返回$http而不是deferred.promise

$ http服务的角度工厂拨打两次电话

2 个答案: