詳解AngularJS中$http緩存以及處理多個(gè)$http請(qǐng)求的方法
$http 是 AngularJS 中的一個(gè)核心服務(wù),用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)。在AngularJS的實(shí)際項(xiàng)目中,經(jīng)常需要處理多個(gè)$http請(qǐng)求,每個(gè)$http請(qǐng)求返回一個(gè)promise,我們可以把多個(gè)promise放到$q.all()方法接受的一個(gè)數(shù)組實(shí)參中去。
1.處理多個(gè)$http請(qǐng)求
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請(qǐng)求緩存
$http的get方法第二個(gè)形參接受一個(gè)對(duì)象,該對(duì)象的cache字段可以接受一個(gè)bool類型實(shí)現(xiàn)緩存,即{cache:true},也可以接受一個(gè)服務(wù)。
通過(guò)factory方式創(chuàng)建一個(gè)服務(wù),并把該服務(wù)注入到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"); } })
小編總結(jié):
● 實(shí)際上,實(shí)現(xiàn)緩存機(jī)制的是$cacheFactory
● 通過(guò){cache:myCache}把緩存機(jī)制放在當(dāng)前請(qǐng)求中
● $cacheFactory把請(qǐng)求api作為key,所以清楚緩存的時(shí)候,也是根據(jù)這個(gè)key來(lái)清除緩存
以上所述是小編給大家分享的AngularJS中$http緩存以及處理多個(gè)$http請(qǐng)求的方法,希望對(duì)大家有所幫助。
- Angularjs中$http以post請(qǐng)求通過(guò)消息體傳遞參數(shù)的實(shí)現(xiàn)方法
- AngularJS $http模塊POST請(qǐng)求實(shí)現(xiàn)
- AngularJS出現(xiàn)$http異步后臺(tái)無(wú)法獲取請(qǐng)求參數(shù)問(wèn)題的解決方法
- angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法
- 詳解AngularJS用Interceptors來(lái)統(tǒng)一處理HTTP請(qǐng)求和響應(yīng)
- AngularJs導(dǎo)出數(shù)據(jù)到Excel的示例代碼
- angular2中Http請(qǐng)求原理與用法詳解
- angular 用攔截器統(tǒng)一處理http請(qǐng)求和響應(yīng)的方法
- Angular的$http的ajax的請(qǐng)求操作(推薦)
- AngularJS基于http請(qǐng)求實(shí)現(xiàn)下載php生成的excel文件功能示例
相關(guān)文章
Angular4學(xué)習(xí)筆記之實(shí)現(xiàn)綁定和分包
本篇文章主要介紹了Angular4學(xué)習(xí)筆記之實(shí)現(xiàn)綁定和分包,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08Spartacus CMS Feature selector的實(shí)現(xiàn)解析
這篇文章主要為大家介紹了Spartacus CMS Feature selector的實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識(shí),在學(xué)習(xí)過(guò)程中寫了一個(gè)小demo,下面把代碼思路分享給大家,感興趣的朋友一起學(xué)習(xí)2016-04-04Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)
這篇文章主要介紹了 Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)的相關(guān)資料,需要的朋友可以參考下2016-12-12Angular4.0中引入laydate.js日期插件的方法教程
在AngularJs中我們會(huì)不可避免的使用第三方庫(kù),例如jquery插件庫(kù)。下面這篇文章主要給大家介紹了關(guān)于Angular4.0中引入laydate.js日期插件的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫法小結(jié)
這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項(xiàng)目的一些基本概念和寫法小結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04使用xampp將angular項(xiàng)目運(yùn)行在web服務(wù)器的教程
這篇文章主要介紹了使用xampp將angular項(xiàng)目運(yùn)行在web服務(wù)器,本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09angular4實(shí)現(xiàn)tab欄切換的方法示例
本篇文章主要介紹了angular4實(shí)現(xiàn)tab欄切換的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10Angular4.x通過(guò)路由守衛(wèi)進(jìn)行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面(推薦)
這篇文章主要介紹了Angular4.x通過(guò)路由守衛(wèi)進(jìn)行路由重定向,實(shí)現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面,這個(gè)功能在網(wǎng)上商城項(xiàng)目上經(jīng)常會(huì)用到,下面小編給大家?guī)?lái)了解決方法一起看看吧2018-05-05