基于RESTFUL的API接口缓存

最近有一个新项目是基于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数组, 结果被缓存

参考文章
Power up http with caching