最近有一个新项目是基于ANGULARJS开发的, 涉及到前端接口缓存以及如何更新缓存的问题. 要做到对开发者透明, 所以选择从拦截器下手, 在发请求前通过一个唯一的key值去读缓存中的数据, 如果有缓存, 则直接返回缓存, 如果没有缓存, 就向服务器发起请求, 并在请求成功后缓存response. 所有的开发者不需要关心如何去处理缓存. 伪代码如下
request: function(){
if(cache[hashKey]){
return cache[hashKey];
}else{
doRequest();
cache.set(hashKey, response)
}
}
如何生成唯一的hashKey?
利用RESTFUL基于资源的URI设计, 一个资源就可以用一个URI(统一资源定位符)指向它, 而且每个资源对应一个特定的URI, 这完全符合我们对于hashKey唯一性的要求.
如何实现缓存对象?
ANGULARJS的$cacheFactory可以为我们提供一个缓存对象, 并赋值给$http.config中的cache字段.
利用$resource封装一个最基本的具有增删改查功能API
angular.module('app')
.factory('examineAPI', function (API_SERVER, $resource, $cacheFactory) {
var cache = $cacheFactory('examine', {capacity: 20});
return $resource(API_SERVER + 'api/examine/:action/:id',
{
id: '@id',
action: '@action'
},
{
list: {
method: 'GET',
cache: cache,
params: {
action: 'list'
}
},
view: {
method: 'GET',
cache: cache,
params: {
action: 'view'
}
}
create: {
method: 'POST',
cache: cache,
params: {
action: 'create'
}
},
update: {
method: 'PUT',
cache: cache,
params: {
action: 'update'
}
},
delete; {
method: 'DELETE',
cache: cache,
params: {
action: 'delete'
}
}
}
)
})
拦截器代码, 若请求为查询操作(GET), 曾默认走缓存, 若请求为非查询操作(SAVE,UPDATE,DELETE),成功后需要重新刷新cache(清空对应cache). 默认cache为$http
angular.module('app')
.factory('cacheInterceptor', function () {
return {
request: request,
response: response
};
function clearCache(config, key) {
(angular.isObject(config.cache) ? config.cache : $cacheFactory.get("$http"))[key ? 'remove' : 'removeAll'](key);
}
function request(config){
if (config.method === 'GET' && config.params && config.params.$forceRefresh) {
clearCache(config);
}
return config;
}
function response(res){
var config = res.config;
if (config.method !== 'GET' && config.cache) {
clearCache(config);
}
return res;
}
});
在config函数中配置
$httpProvider.interceptors.push('cacheInterceptor');
大功告成, 开发者无需关心缓存的处理, 完全透明.
examineAPI.query(); //发起GET请求, 返回examines数组, 结果被缓存
examineAPI.query(); //不发请求, 直接返回缓存
examineAPI.update({id: 1}) //发起PUT请求, 缓存会清空
examineAPI.query(); //重新发起GET请求, 返回examines数组, 结果被缓存
网友评论