详解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 相关文章推荐
Javascript排序算法之计数排序的实例
Apr 05 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
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+Html+缓存
2006/12/20 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
动态控制Table的js代码
2007/03/07 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python3 flask实现文件上传功能
2020/03/20 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
通过cmd进入python的实例操作
2019/06/26 Python
python将数组n等分的实例
2019/12/02 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
安全事故检讨书
2014/01/18 职场文书
税务会计岗位职责
2014/02/18 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技