详解AngularJS中$http缓存以及处理多个$http请求的方法

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。在AngularJS的实际项目中，经常需要处理多个$http请求，每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去。

1.处理多个$http请求

angular.module('app',[])

.controller('AppCtrl', function AppCtrl(myService){

var app = this;

myService.getAll().then(function(info){

app.myInfo = info;

})

})

.service('myService', function MyService($http, $q){

var myService = this;

user = 'https://api...',

repos = '',

events = '';

myService.getData = function getData(){

return $http.get(user).then(function(userData){

return {

name:userData.data.name,

url:userData.data.url,

repoCount: userData.data.count

}

})

};

myService.getUserRepos = function getUserRepos(){

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 = function getUserEvents(){

...

}

myService.getAll = function(){

var userPromise = 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){

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