$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