AngularJS의 $http 캐싱에 대한 자세한 설명과 여러 $http 요청을 처리하는 방법_AngularJS

$http는 AngularJS의 핵심 서비스로, 원격 서버에서 데이터를 읽는 데 사용됩니다. 실제 AngularJS 프로젝트에서는 여러 개의 $http 요청을 처리해야 하는 경우가 많습니다. 각 $http 요청은 $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:true}를 허용하거나 서비스를 허용할 수도 있습니다.

팩토리 메소드를 통해 서비스를 생성하고 컨트롤러에 서비스를 주입합니다.

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를 키로 사용하므로 캐시를 지울 때 이 키를 기준으로 캐시도 지웁니다

위는 편집자가 공유한 AngularJS에서 여러 개의 $http 요청을 $http 캐싱하고 처리하는 방법입니다. 모두에게 도움이 되기를 바랍니다.