详解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请求的方法，希望对大家有所帮助。