$http——ajax跨域請求的angular方式

在Angular中，我們可以非常友善的進行AJAX請求。我們隻需要注入$http，進行一個AJAX請求 – 然後我們就能得到一個promise對象，并可以很友善的調用其中的success或者error方法。例如下面的代碼:

$http.get('/foo/bar' + itemId)
         .success(function(data){
                data;// {foo: 'bar'}
         })
         .error(function(data,status,headers,config){
            //一些錯誤處理的代碼
         });  
                

ok，現在你已經從後端得到了一些資料，那麼然後呢？像上面例子中的這種資料似乎并不會頻繁的發生變化，是以你會想為什麼你的用戶端需要重複進行同樣的請求擷取同樣的資料呢 – 多麼浪費時間消耗資源一件事情！好在我們可以使用緩存來為你節省時間和帶寬，如下面的代碼所示：

$http.get('/foo/bar' + itemId, {cache: true})
         .success(function(data){
            data; //{foo : 'bar'}
         })
         .error(function(data,status,headers,config){
            //一些錯誤處理代碼
         });   
                

非常好！現在，假如$http第一次想/foo/bar/123發出了一個GET請求，響應的結果會被存儲在一個叫做$http的緩存中，這個緩存由Angular的$cacheFactory建立，并在Angular啟動時會作為$http service的預設緩存。

{cache: true}

告訴$http service要在$http的預設緩存中緩存特定的請求響應結果。除此之外，你什麼都不用做。任何針對/foo/bar/123的後續請求都會簡單地使用這個緩存的結果。

如果你想要引用這個$http的預設緩存來擷取其中的項目，移除其中的項目，清空緩存等等。你隻需要在任何地方注入$cahcheFactory即可，然後我們就可以通過下面的代碼來引用預設$http緩存：

var $httpDefaultCache = $cacheFactory.get($http);   
                

你也可以使用你進行GET請求的絕對路徑來擷取相應的請求相應結果：

var cacheDate = $httpDefaultCache.get('http://example.com/foo/bar/123'); // { foo : 'bar'}   
                

你可以從緩存中移除項目：

$httpDefaultCache.remove('http://example.com/foo/bar/123');   
                

或者清空整個緩存：

$httpDefaultCache.removeAll();   
                

LRU 緩存

如果你不想要$http來存儲每一次相應怎麼辦?這也很簡單：你隻需要将它設定為LRU緩存即可（Least Recently Used）。

var lruCache = $cacheFactory('lruCache',{ capacity : 10 });  

$http.get('/foo/bar/' + itemId, { cache: lruCache })
  .success(function (data) {
    data; // { foo: 'bar' }
  })
  .error(function (data, status, headers, config) {
    // 一些錯誤處理代碼  
  });   
                

每個針對/foo/bar/:itemId請求的響應都會被緩存，但是在上面的代碼中緩存次數隻有十次。當發送第十一次請求時，最早一次的緩存會從緩存中被移除。這裡的緩存按順序包含着一個項目清單以便它在進行一次新的請求時知道應該移除哪一個舊的緩存項目。

設定一個預設緩存

正如前面的LRU的例子所示，你可以告訴$http請求使用一個自定義的緩存而不是$http預設緩存，但是如果你想要改變$http預設緩存怎麼辦？這也很簡單：

$httpProvider.defaults.cache = $cacheFactory('myNewDefaultCache',{capacity: 100 });   
                

$http現在就回使用myNewDefaultCache作為它的預設緩存。

進階緩存

如果你想使用緩存來改善使用者體驗，但是資料可能在一天或者幾個小時之内就發生一次改變該怎麼辦？你可能想要確定你的緩存資料一天或者幾個十分鐘就清空一次。但是不幸的是，Angular中的$cacheFactory并沒有提供這次額功能。

你可以使用setInterval()或者setTimeout()來進行一些修改，但是你可能并不想幹這些事情。為了解決這個問題，我們可以使用一個叫做

angular-cache

的第三方子產品。使用這個子產品，你可以定期清理你的緩存。當設定一個緩存時你可以指定maxAge，它用來表明該緩存中某個項目的最長存續時間。或者你可以對整個緩存指定maxAge，它将運用在添加到該緩存中的所有項目之上。

希望你使用緩存愉快！

本文譯自Power up Angular’s $http service with caching，原文位址https://coderwall.com/p/40axlq

本文轉載自http://www.html-js.com/article/1828