详解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请求的方法,希望对大家有所帮助。
- Angularjs中$http以post请求通过消息体传递参数的实现方法
- AngularJS $http模块POST请求实现
- AngularJS出现$http异步后台无法获取请求参数问题的解决方法
- angularJS 发起$http.post和$http.get请求的实现方法
- 详解AngularJS用Interceptors来统一处理HTTP请求和响应
- AngularJs导出数据到Excel的示例代码
- angular2中Http请求原理与用法详解
- angular 用拦截器统一处理http请求和响应的方法
- Angular的$http的ajax的请求操作(推荐)
- AngularJS基于http请求实现下载php生成的excel文件功能示例
相关文章
Spartacus CMS Feature selector的实现解析
这篇文章主要为大家介绍了Spartacus CMS Feature selector的实现解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07Angular.js与Bootstrap相结合实现表格分页代码
最近一直在学习angularjs相关知识,在学习过程中写了一个小demo,下面把代码思路分享给大家,感兴趣的朋友一起学习2016-04-04Angular4.0中引入laydate.js日期插件的方法教程
在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库。下面这篇文章主要给大家介绍了关于Angular4.0中引入laydate.js日期插件的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。2017-12-12使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
这篇文章主要介绍了使用Angular CLI快速创建Angular项目的一些基本概念和写法小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-04-04Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
这篇文章主要介绍了Angular4.x通过路由守卫进行路由重定向,实现根据条件跳转到相应的页面,这个功能在网上商城项目上经常会用到,下面小编给大家带来了解决方法一起看看吧2018-05-05
最新评论