angularjs：$ http被缓存

Question

所以我有这样的服务：

.service("checkSystemStatus", ["$http", "statusUrl", function($http, statusUrl){
    return  $http({method: "GET", url: statusUrl, cache: false});  
 }])

使用此标记：

<li ng-mouseenter="checkStatus()">
  <i class="fa fa-info-circle"></i>
  <div class="info-container">  
    <h4>System Info</h4>
    <table class="system-info">
      <tr ng-repeat="(key, value) in systemInfo">
        <td>{{key}}</td>
        <td>{{value}}</td>
      </tr>
    </table>                      
  </div>
</li>

和这个功能：

$scope.checkStatus = function(){
  $scope.systemInfo = {};
  checkSystemStatus.then(function(success){   
      $scope.systemInfo.running = success.data.jobs_running;
      $scope.systemInfo.queued = success.data.jobs_queued;
      $scope.systemInfo.cached = success.data.jobs_cached;
      $scope.systemInfo.active_threads = success.data.threads_active;
      $scope.systemInfo.server_address = success.data.server_address;
      $scope.systemInfo.server_port = success.data.server_port;
      console.log($scope.systemInfo);
  })
}

问题是我总是得到相同的systemInfo值，每当我将信息图标悬停时，我在控制台中看不到任何XHR请求，除了第一个，在加载页面时发生，而不是在我悬停时标签上的鼠标。

到目前为止解决此问题的唯一方法是在网址末尾添加一个参数，如

?time=unixtime

每次都会获得一个新的网址，但是如果没有尾随参数的清洁解决方案呢？可能吗？

Answer 1

嗯，它不仅取决于＆＃34; AngularJS＆＃34; -Cache，还取决于浏览器和服务器缓存设置。检查响应中的服务器向客户端发送哪种缓存标头。添加＆＃34;时间戳＆＃34; REST-URL的参数是避免基于浏览器的缓存的一个技巧 - 是的。

但总的来说：这就是客户端 - 服务器通信的方式。我怀疑服务器会发送一些匹配的Vary，ETag，Cache-Expire等标题。

Answer 2

尝试将这些http标头添加到服务器的响应中：

Cache-Control:no-cache, no-store, must-revalidate
Expires:-1
Pragma:no-cache

Answer 3

试试这个

.service("checkSystemStatus", ["$http", "statusUrl", '$q', function($http, statusUrl, $q){
    this.GetData = function(){
        $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
        return  $http({
               method: "GET",
               url: statusUrl,
               cache: false //no need to use this, caching is false by default
            }).
            then( function(response){
                if (response.data) {
                   return response.data;
                }
                else
                   return $q.reject('Request failed');
            });
    }
}]);

控制器部分

$scope.checkStatus = function(){
 $scope.systemInfo = {};
 checkSystemStatus.GetData().then(function(data){   
    $scope.systemInfo.running = data.jobs_running;
    $scope.systemInfo.queued = data.jobs_queued;
    $scope.systemInfo.cached = data.jobs_cached;
    $scope.systemInfo.active_threads = data.threads_active;
    $scope.systemInfo.server_address = data.server_address;
    $scope.systemInfo.server_port = data.server_port;
    console.log($scope.systemInfo);
 })
}

Answer 4

正如其他答案告诉您的那样：如果未设置来自服务器的相应响应标头，浏览器可以选择缓存响应。在MajoBs回答中设置响应头。

如果您无法从服务器更新响应标头，则可以确保每个请求的网址都是唯一的。您可以通过向网址添加时间戳来执行此操作：

.service("checkSystemStatus", ["$http", "statusUrl", function($http, statusUrl){
    statusUrl = statusUrl + '?' + Date.now();
    return  $http({method: "GET", url: statusUrl, cache: false});  
}])