详解AngularJS中$http缓存以及处理多个$http请求的方法
程序员文章站
2022-06-02 23:23:03
$http 是 angularjs 中的一个核心服务,用于读取远程服务器的数据。在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请求的方法,希望对大家有所帮助。
上一篇: 设计模式之生产者消费者模式
下一篇: 关于React总结
推荐阅读
-
Angularjs中$http以post请求通过消息体传递参数的实现方法
-
详解AngularJS中$http缓存以及处理多个$http请求的方法
-
ASP.NET Core中调整HTTP请求大小的几种方法详解
-
解决angularjs中同步执行http请求的方法
-
Angularjs中$http以post请求通过消息体传递参数的实现方法
-
详解AngularJS中$http缓存以及处理多个$http请求的方法
-
ASP.NET Core中调整HTTP请求大小的几种方法详解
-
Angularjs中$http以post请求通过消息体传递参数的实现方法
-
Angularjs中$http以post请求通过消息体传递参数的实现方法
-
解决angularjs中同步执行http请求的方法