详解AngularJS中$http缓存以及处理多个$http请求的方法
$http是AngularJS中的一个核心服务,用于读取远程服务器的数据。在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去。
1.处理多个$http请求
angular.module('app',[]) .controller('AppCtrl',functionAppCtrl(myService){ varapp=this; myService.getAll().then(function(info){ app.myInfo=info; }) }) .service('myService',functionMyService($http,$q){ varmyService=this; user='https://api...', repos='', events=''; myService.getData=functiongetData(){ return$http.get(user).then(function(userData){ return{ name:userData.data.name, url:userData.data.url, repoCount:userData.data.count } }) }; myService.getUserRepos=functiongetUserRepos(){ return$http.get(repos).then(function(response){ return_.map(response.data,function(item){ return{ name:item.name, description:item.description, starts:item.startCount } }) }) } myService.getUserEvents=functiongetUserEvents(){ ... } myService.getAll=function(){ varuserPromise=myService.getData(), userEventsPromise=myService.getUserRepos(), userReposPromise=myService.getUserRepos(); return$q.all([userPromise,userEventsPromise,userReposPromise]).then(function(){ .... }) } })
2.$http请求缓存
$http的get方法第二个形参接受一个对象,该对象的cache字段可以接受一个bool类型实现缓存,即{cache:true},也可以接受一个服务。
通过factory方式创建一个服务,并把该服务注入到controller中去。
angular.module('app',[]) .factory("myCache",function($cacheFactory){ return$cacheFactory("me"); }) .controller("AppCtrl",function($http,myCache){ varapp=this; app.load=function(){ $http.get("apiurl",{cache:myCache}) .success(function(data){ app.data=data; }) } app.clearCache=function(){ myCache.remove("apiurl"); } })
小编总结:
●实际上,实现缓存机制的是$cacheFactory
●通过{cache:myCache}把缓存机制放在当前请求中
●$cacheFactory把请求api作为key,所以清楚缓存的时候,也是根据这个key来清除缓存
以上所述是小编给大家分享的AngularJS中$http缓存以及处理多个$http请求的方法,希望对大家有所帮助。