Question

这是我的代码。

$scope.init = function () {
            $scope.urlParam = $location.search();
            if ($scope.urlParam.token == undefined || $scope.urlParam.id == undefined) {
                $scope.is_start = false;
                alert("您没有权限投票");
            } else {
                $http.get('/vote/validate_querystring?token=' + $scope.urlParam.token + "&id=" + $scope.urlParam.id)
                    .success(function (response) {
                        if (response.status == 3) {
                            $scope.is_start = false;
                            alert("您没有权限投票");
                        } else if (response.status == 4) {
                            $scope.is_start = false;
                            alert("您已完成投票");
                        } else {
                            $http.get('/vote/r_vote_setting')
                                .success(function (response) {
                                    if (response.status == 1) {
                                        $scope.is_start = false;
                                        alert("投票尚未开始");
                                    } else {
                                        $scope.is_start = true;
                                        $scope.voteData = response.data;
                                    }
                                });
                        }
                    })
            }
        };

我将此函数放在ng-init中，因此每次加载页面时都会调用它。

如您所见，此功能中有两个 $http.get。问题是当我点击后退按钮返回此页面时，$http.get('/vote/validate_querystring?token=')将从浏览器缓存中加载，而$http.get('/vote/r_vote_setting')向服务器发出新请求。我是从chrome console发现的。

Request URL:http://localhost:8080/vote/validate_querystring?token=202cb962ac59075b964b07152d234b70&id=1
Request Method:GET
Status Code:200 OK (from disk cache)
Remote Address:[::1]:8080
Referrer Policy:no-referrer-when-downgrade

Request URL:http://localhost:8080/vote/r_vote_setting
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:8080
Referrer Policy:no-referrer-when-downgrade

我想知道为什么会发生这种情况以及如何让它们向服务器发送请求而不是在回击按钮时缓存。

Answer 1

您可以使用$ http的cache：false选项。

$http.get('/vote/validate_querystring?token=' + $scope.urlParam.token + "&id=" + $scope.urlParam.id,cache: false);

使用$ httpProvider设置缓存错误

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

Answer 2

您还可以在呼叫中包含一个时间参数，该参数将使每个呼叫唯一，从而避免仅对该特定呼叫进行不必要的缓存，而不必弄乱$ http默认设置，并有可能影响页面上的其他所有呼叫

$http.get({
  url: sampleUrl,
  method: 'GET',
  params: {
    time: new Date()
  }
}).error(function (err) {
  console.log('Error encountered: ' + err);
}).success(function (data) {
  console.log(data);
});

Angularjs $ http请求缓存在浏览器后退按钮上

2 个答案: