如何在AngularJS中管理API請求緩存

在AngularJS中，可以通過以下幾種方法來管理API請求緩存：

1. 使用HTTP緩存頭

AngularJS的$http服務允許你通過設置HTTP響應頭來控制緩存。例如，你可以設置Cache-Control和Expires頭來實現緩存。這需要在服務器端進行相應的配置，以便為特定的資源設置適當的緩存策略。

示例：

$http({
  method: 'GET',
  url: 'https://api.example.com/data',
  cache: true, // 將HTTP響應頭設置為緩存
}).then(function(response) {
  // 處理成功的響應
}, function(error) {
  // 處理錯誤的響應
});

2. 使用$cacheFactory服務

AngularJS提供了一個內置的$cacheFactory服務，可以用來創建自定義緩存對象。這可以讓你更好地控制緩存策略，例如設置緩存大小限制或過期時間。

示例：

app.factory('myCache', function($cacheFactory) {
  var cache = $cacheFactory('myCache');
  return cache;
});

app.controller('myController', function($scope, $http, myCache) {
  $scope.data = null;

  $http({
    method: 'GET',
    url: 'https://api.example.com/data',
    cache: myCache, // 使用自定義緩存
  }).then(function(response) {
    $scope.data = response.data;
  }, function(error) {
    // 處理錯誤的響應
  });
});

3. 使用本地存儲（localStorage或sessionStorage）

你還可以將API響應存儲在瀏覽器的本地存儲中，以便在后續請求中使用。這可以通過手動將響應數據存儲到本地存儲中，然后在請求數據時從本地存儲中讀取來實現。

示例：

app.controller('myController', function($scope, $http) {
  $scope.data = null;

  // 從本地存儲中獲取數據
  $scope.loadData = function() {
    var cachedData = localStorage.getItem('apiData');
    if (cachedData) {
      $scope.data = JSON.parse(cachedData);
    } else {
      // 從API獲取數據
      $http({
        method: 'GET',
        url: 'https://api.example.com/data',
      }).then(function(response) {
        $scope.data = response.data;
        // 將數據存儲到本地存儲中
        localStorage.setItem('apiData', JSON.stringify(response.data));
      }, function(error) {
        // 處理錯誤的響應
      });
    }
  };

  $scope.loadData();
});

請注意，這些方法可以結合使用，以實現最佳的緩存策略。在實際應用中，你可能需要根據API的要求和你的應用需求來調整緩存策略。