angularjs: $http 被缓存答案

【问题标题】：angularjs: $http is cachedangularjs: $http 被缓存
【发布时间】：2014-11-06 10:53:54
【问题描述】：

所以我有这样的服务：

.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 请求，这发生在加载页面时，而不是在我悬停时鼠标在标签上。

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

?time=unixtime

每次都获取一个新的 url，但是没有尾随参数的更清洁的解决方案呢？可能吗？

【问题讨论】：

标签： angularjs http caching

【解决方案1】：

嗯，它不仅取决于“AngularJS”缓存，还取决于浏览器和服务器缓存设置。检查服务器在其响应中发送给客户端的缓存头类型。向 REST-URL 添加“时间戳”参数是避免基于浏览器缓存的一种技巧 - 是的。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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);
 })
}

【讨论】：

【解决方案4】：

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

如果您无法从服务器更新响应标头，您可以确保每个请求的 url 都是唯一的。您可以通过在 url 中添加时间戳来做到这一点：

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

【讨论】：