AngularJS中的$http缓存以及处理多个$http请求
在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去。
■ 处理多个$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(){
....
})
}
})
■ $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请求的更多相关文章
- AngularJS中实现Model缓存
在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope ...
- Angularjs中的缓存以及缓存清理
写在最前面:这篇博文是2篇文章组成,详细介绍了Angularjs中的缓存以及缓存清理,文章由上海尚学堂转载过来,欢迎大家阅读和评论.转载请注明出处,谢谢! 一个缓存就是一个组件,它可以透明地储存数据, ...
- AngularJS中实现无限级联动菜单(使用demo)
昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo directive的源代 ...
- AngularJS中实现无限级联动菜单
多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...
- AngularJS 中的 Promise 和 设计模式(转)
原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...
- AngularJs中的directives(指令part1)
一.指令的职责 指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
- angularJS中XHR与promise
angularJS应用是完全运行在客户端的应用,我们可以通过angularJS构建一个不需依赖于后端,同时能够实现动态内容和响应的web应用,angularJS提供了将应用与远程服务器的信息集成在一起 ...
- AngularJS 中的 Promise 和 设计模式
解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后给它一个函数引用,当这个方法完结的时候执行这个函数引用. <!-- lang: js --> $.get('ap ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
随机推荐
- mysql语句判断是否存在记录,没有则插入新纪录否则不执行
1 前言 由于项目需要,当某个表如果有记录,就不执行加入语句,否则加入新纪录(测试数据).思路是:判断表的记录是否为空,然后再决定是否插入 2 代码 DROP PROCEDURE IF EXISTS ...
- IntelliJ IDEA 12:
启动参数-server -Xms1024m -Xmx1024m -XX:NewSize=128m -XX:MaxNewSize=128m -XX:PermSize=128m -XX:MaxPermSi ...
- 【ES】学习4-结构化搜索
1. 结构化搜索得到的结果只有是和否,没有相似概念. term可以实现精确值查询 curl -XGET 'localhost:9200/logstash-cowrie/_search?pretty' ...
- composer 安装依赖缓慢,查看 composer 的详细执行日志
在 windows WSL 上安装 composer 依赖 composer install 发现执行异常缓慢,怀疑没有走国内的镜像,而是直接访问的 github. 需要能看到 composer 的执 ...
- Codeforces 5C Longest Regular Bracket Sequence(DP+括号匹配)
题目链接:http://codeforces.com/problemset/problem/5/C 题目大意:给出一串字符串只有'('和')',求出符合括号匹配规则的最大字串长度及该长度的字串出现的次 ...
- pytest十三:配置文件 pytest.ini
pytest 配置文件可以改变 pytest 的运行方式,它是一个固定的文件 pytest.ini 文件,读取配置信息,按指定的方式去运行. ini 配置文件pytest 里面有些文件是非 test ...
- 将eclipse的maven项目导入到intellij idea中
最近项目中需要用到idea,需要将原来的eclipse项目进行转移.捣鼓了半天终于成功了,在这里和大家分享下,希望对大家有所帮助,如有错误,欢迎指正. idea的确是一款很智能的开发工具,真的是爱不释 ...
- JavaScrit全面总结
前端技术的发展变化太快了,各种各样的框架.再变也离不开js.所以,在此把js的高级语法总结一遍. js解析和执行包括:全局和函数 一:全局预处理 <script type="te ...
- [颜色知识] 潘通色卡、CMYK、RGB、 ARGB...
潘通色卡C结尾的色号都是RGB色系的,而CMYK是印刷系的,两者不能通用的,所以,不能完全对等进行转换 Pantone Colors [色卡]PANTONE潘通色卡C面颜色http://blog.si ...
- poj 1961 (求字符串中的重复子串)
Sample Input 3aaa12aabaabaabaab0Sample Output Test case #12 23 3 Test case #22 2 //aa有2个a6 2 //aabaa ...