IONIC 中使用拦截功能来实现API接口访问的数据缓存

原创 2016年08月30日 10:35:03

在开发中,我们经常要访问接口来取一些不经常变化的数据,例如会员类型、产品分类等数据,频率的访问远程API而造成资源浪费,体验度差,所以想到用以下的方法来实现。

具体思路是通过http拦截,取API远程访问的方法名和参数,并将取回的数据缓存到本地,下次GET同一个API方法,且参数又相同,则直接使用本地缓存中的数据,而不去GET远程API接口。POST取数的方式还没有实现。


1、在.config节点注入拦截器

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider,$httpProvider) {
	
	$httpProvider.interceptors.push('UserInterceptor');

})


2、声明拦截器代码


//数据缓存,
//CacheDataService是我的一个数据缓存服务
.factory('UserInterceptor', ["$q","$rootScope","$injector",function ($q,$rootScope,$injector,CacheDataService) { return { request:function(config){ //$rootScope.$broadcast('loading:show') return config; }, response:function(response){ var data=response.data; if (!data.success){ if (data.ResponseCode=="2003"){ //这里可以根据API接口的返回状态码来判断API访问时的TOKEN是否过期,可以根据自己的实际情况修改 window.location="#/tab/login" } }else{
	//这里取远程访问API时的接口方法
        var tmp= response.config.url.substr(response.config.url.indexOf('api'),response.config.url.indexOf('?')-response.config.url.indexOf('api'));
	//获得GET方法时用到的参数,POST方法暂时没有做
        var param=response.config.url.substr(response.config.url.indexOf('?')+1);
	//获得CacheDataService服务
        var CacheDataService= $injector.get("CacheDataService");
	//检查该API方法名是否在缓存清单中
        if (CacheDataService.CheckCanCache(tmp)) {
		//开始缓存该数据
          CacheDataService.CacheDataFactory(tmp,param,response.data);
        }
      }
      // $rootScope.$broadcast('loading:hide')
      return response
    },
    responseError: function (response) {
      // $rootScope.$broadcast('loading:hide')
    }
  };
}])

贴上CacheDataService的代码,写的还不够完善
angular.module('starter.DataCache', [])
  //数据缓存服务
  .factory('CacheDataService',function($http,$q,BaseService,BaseFunction){
    var CacheDatas=[];
    var CacheTables=["api/BaseInfoGoods/GetGoodsList","api/init/GetInitData","api/BaseArticle/GetList","api/CommonUser/GetUserList_"];
    return{
      //该方法用于缓存数据
      CacheDataFactory:function(InterFaceName,param,Data){
        if (BaseFunction.indexofValues(CacheTables,InterFaceName)>-1){
          var tmpdata={TableName:InterFaceName,Param:param,Data:Data};
          BaseFunction.replaceValueInCache(InterFaceName,param,CacheDatas,tmpdata);
          return true;
        }else{
          return false;
        }
      },
      //该方法用于从缓存当中取数据
      GetDataFormCache:function(InterFaceName,param){
        for (var i=0;i<CacheDatas.length;i++){
          if (CacheDatas[i].TableName==InterFaceName&&BaseFunction.CheckParam(CacheDatas[i].Param,param)){
            return CacheDatas[i].Data;
            break;
          }
        }
        return "";
      },
      //检查是否可缓存
      CheckCanCache:function(InterFaceName){
        return BaseFunction.indexofValues(CacheTables,InterFaceName)>-1;
      }
    }
  })
  .factory('BaseFunction',function($http,$q,BaseService){
    return{
      //查询某个值在数组当中是否存在,返回ID号,否则返回-1
      indexofValues:function(values, value){
        for(var i=0;i<values.length;i++)
        {
          if (values[i]==value){
            return i;
            break;
          }
        }
        return -1;
      },
      replaceValueInCache:function(InterFaceName,param,CacheDatas,Data){
        var b=false;
        for (var i=0;i<CacheDatas.length;i++){
          if (CacheDatas[i].TableName==InterFaceName&&CacheDatas[i].Param==param){
            b=true;
            CacheDatas[i]=Data;
            break;
          }
        }
        if (!b){
          CacheDatas.push(Data);
        }
        return CacheDatas;
      },
      CheckParam:function(newvalue,oldvalue){
        tmp1=newvalue.substr(0,newvalue.indexOf('&ts='))
        tmp2=oldvalue.substr(0,newvalue.indexOf('&ts='))
        return tmp2==tmp1;
      }
    }
  });
然后在取数据service当中:
GetData:function(InterFaceName,param,FromCache){
  var mydata="";
  if (FromCache) {
    mydata = CacheDataService.GetDataFormCache('api/' + InterFaceName, param);
  }
  if(mydata!=""){//如果该接口可以缓存,而且有缓存数据时直接返回缓存好的数据
    var deferred = $q.defer();
    deferred.resolve(mydata);
    return deferred.promise;
  }else {
    var baseurl = BaseService.GetServerIP();
    var deferred = $q.defer();
    var BASE_URL = baseurl + "api/" + InterFaceName + "?" + param;
    $http({method: 'GET', url: BASE_URL}).
    success(function (data, status, headers, config) {
      deferred.resolve(data);
    }).
    error(function (data, status, headers, config) {
      deferred.reject(data);
    });
    return deferred.promise;
  }
},



版权声明:本文为博主原创文章,未经博主允许不得转载。

linux下使用hiredis异步API实现sub/pub消息订阅和发布的功能 标签: hiredishiredis异步APIhiredis事件处理redis消息订阅发布redis c接口 2016-

最近使用redis的c接口——hiredis,使客户端与redis服务器通信,实现消息订阅和发布(PUB/SUB)的功能,我把遇到的一些问题和解决方法列出来供大家学习。        废话不多说,先...

记录下最近在研究的使用AndroidStudio 实现untiy3d调用安卓内置的API接口实现刷新相册的功能

项目需要截图,并刷新系统相册。使用AndroidStudio 奈何找遍国内互联网。基本都是使用eclipse的 大家都是知道得 自从出了AndroidStudio之后 ADT Bundle 就没...
  • wsevils
  • wsevils
  • 2015年12月24日 14:20
  • 1428

新浪微博API 接口数据缓存

接口数据如何适当的缓存  在您的应用中,在正常业务需要的情况下,尽量减少请求量,减少请求接口返回数据,有必要缓存一些已经获取到的数据,来提高应用的效率和体验。下面一些场景,可供参考:  获取/stat...
  • slyjit
  • slyjit
  • 2013年11月22日 10:00
  • 1926

微信小程序api调起微信提供的功能-网络、媒体、文件、数据存储、位置、设备、界面、开发接口

微信小程序-API框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。说明:wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALL...

HTML5 使用application cache 接口实现离线数据缓存

1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest 文件名称:name.manifest 作用:用于配置需要缓存的文件 2.使用方法 在服务...
  • fdipzone
  • fdipzone
  • 2013年10月15日 00:16
  • 22459

从0到1学习笔记:使用Python搭建简单的服务器,实现页面分发与数据接口功能

接到个小活,要实现一个局域网内的小服务器,需求如下: 1.实现静态文件下发功能,主要是apk安装包和html及其相关文件; 2.实现数据接口,用于存储和查询网内其他设备发来的数据; 3.实际使用者电脑...

php调用支付宝PHP接口API实现在线即时支付功能

这次在项目中要实现订单功能,所以要完成在线支付,在线支付一般有网银支付和第三方支付(支付宝、paypal等)这两种途径,未简单起见,先完成支付宝在线支付功能,由于项目基于Yii框架,且使用UTF-8编...

springmvc controller 面向切面编程,实现数据查询的缓存功能

面向切面编程的使用记录

微信文章阅读数点赞数查询API接口及实现(小数据量)

微信文章阅读数点赞数查询API接口及实现     研究过微信文章阅读和点赞数的同学都知道,如何获取这两个数字,关键在于获取微信有效的key.这个key的作用时间大概是2小时,而且也有访问频率的限制....
  • Owen292
  • Owen292
  • 2015年08月03日 14:51
  • 23405
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IONIC 中使用拦截功能来实现API接口访问的数据缓存
举报原因:
原因补充:

(最多只允许输入30个字)