美文网首页
基于RESTFUL的API接口缓存

基于RESTFUL的API接口缓存

作者: 菲汐 | 来源:发表于2016-09-26 17:04 被阅读2811次

    最近有一个新项目是基于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

    相关文章

      网友评论

          本文标题:基于RESTFUL的API接口缓存

          本文链接:https://www.haomeiwen.com/subject/chrqyttx.html