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


Posted in Javascript onFebruary 06, 2016

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

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 #Javascript
详解Angularjs filter过滤器
Feb 06 #Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 #Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 #Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 #Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 #Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 #Javascript
You might like
使用PHP的日期与时间函数技巧
2008/04/24 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
python入门基础之用户输入与模块初认识
2016/11/14 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
高中生校园生活自我评价
2013/09/19 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
追悼会主持词
2014/03/20 职场文书
派出所所长先进事迹
2014/05/19 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Python Django搭建文件下载服务器的实现
2021/05/10 Python