更改 json 文件后，角度工厂返回数据保持不变

Question

我正在从“cameraData”服务调用camera.json 文件并将cameradata 服务注入“CameraController”。如果我在单击刷新按钮后更改了 camera.json，我将获得旧数据。有什么想法吗？

.factory('cameraData', function ($http, $q,globalVariable) { var deferred = $q.defer();

var cameraData = {};     
var contentType  = "application/json; charset=utf-8";   

cameraData.GetItemList = function(){ 
    $('.loader').show();
    var senddata ={};
    senddata.installedcameraid = "9547857793457943";
      $http({
        //url: globalVariable.ServerAddress + "Admin_GetCameraPoints",
        url: globalVariable.Camerafilepath,
        dataType: 'json',
        method: "POST",
        data: JSON.stringify(senddata),
        headers: {
            "Content-Type": contentType,
            "access_token": globalVariable.TOKEN
        }

    }).success(function(response){ 
        //$scope.response = response;
        deferred.resolve(response);
        return deferred.promise;

    }).error(function(error){
        //$scope.error = error;
        deferred.reject(error);
    });


    return deferred.promise;
}


return cameraData;

})

.controller('CameraController',function($scope,$timeout,cameraData){ $scope.refreshCameraData = function(){

    $scope.allCamera = [];
    cameraData.GetItemList()
    .then(function(data) {
        $scope.allCamera = data.Camera;
    }, function(err) {
        // promise rejected, could log the error 
        console.log('error', err);
    });

}

cameraData.GetItemList()
    .then(function(data) {
        $scope.allCamera = data.Camera;
    }, function(err) {
        // promise rejected, could log the error 
        console.log('error', err);
    });

})

Answer 1

每次调用工厂方法时都需要创建 defer 对象。每次调用 api 时它都应该返回新的承诺。使用以下代码更改您的工厂代码。

var cameraData = {};
$('.loader').show();        
var contentType  = "application/json; charset=utf-8";   

cameraData.GetItemList = function(){
    // need to create defer object everytime 
    var deferred = $q.defer(); 
    $('.loader').show();
    var senddata ={};
    senddata.installedcameraid = "9547857793457943";
      $http({
        //url: globalVariable.ServerAddress + "Admin_GetCameraPoints",
        url: globalVariable.Camerafilepath,
        dataType: 'json',
        method: "POST",
        data: JSON.stringify(senddata),
        headers: {
            "Content-Type": contentType,
            "access_token": globalVariable.TOKEN
        }

    }).success(function(response){ 
        //$scope.response = response;
        $('.loader').hide();
        deferred.resolve(response);
        return deferred.promise;

    }).error(function(error){
        //$scope.error = error;
        $('.loader').hide();
        deferred.reject(error);
    });


    return deferred.promise;
}


return cameraData;
})

Answer 2

您无需显式创建延迟对象并手动解析/拒绝它。 $http() 方法本身返回一个promise，可以直接返回如下。

.factory('cameraData', function ($http, $q,globalVariable) {
    var cameraData = {};
    $('.loader').show();        
    var contentType  = "application/json; charset=utf-8"; 

    cameraData.GetItemList = function(){
        $('.loader').show();
        var senddata ={};
        senddata.installedcameraid = "9547857793457943";

        return $http({
            //url: globalVariable.ServerAddress + "Admin_GetCameraPoints",
            url: globalVariable.Camerafilepath,
            dataType: 'json',
            method: "POST",
            data: JSON.stringify(senddata),
            headers: {
                "Content-Type": contentType,
                "access_token": globalVariable.TOKEN
            }

        }).then(function(response){ 
            $('.loader').hide();
        }).error(function(error){
            $('.loader').hide();
        });
    }

   return cameraData;
});

另外，为了隐藏加载器，您可以使用.finally() 方法，如下所示：

        return $http({
            url: globalVariable.Camerafilepath,
            dataType: 'json',
            method: "POST",
            data: JSON.stringify(senddata),
            headers: {
                "Content-Type": contentType,
                "access_token": globalVariable.TOKEN
            }

        }).finally(function(response){ 
            $('.loader').hide();
        });

在您的控制器中，您现在可以访问响应，

.controller('CameraController',function($scope,$timeout,cameraData){

    $scope.refreshCameraData = function(){

        $scope.allCamera = [];

        cameraData
            .GetItemList()
            .then(function(response) {
                $scope.allCamera = response.data.Camera;
            }, function(err) {
                // promise rejected, could log the error 
                console.log('error', err);
            });

    }


    cameraData.GetItemList()
        .then(function(response) {
            $scope.allCamera = response.data.Camera;
        }, function(err) {
            // promise rejected, could log the error 
            console.log('error', err);
        });
    })
})