Explication détaillée de la mise en cache $http dans AngularJS et comment gérer plusieurs requêtes $http_AngularJS

$http est un service principal d'AngularJS, utilisé pour lire les données des serveurs distants. Dans les projets AngularJS réels, il est souvent nécessaire de traiter plusieurs requêtes $http. Chaque requête $http renvoie une promesse. Nous pouvons mettre plusieurs promesses dans un argument de tableau accepté par la méthode $q.all().

1. Gérer plusieurs requêtes $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 demande de cache

Le deuxième paramètre formel de la méthode get de $http accepte un objet. Le champ de cache de l'objet peut accepter un type booléen pour implémenter la mise en cache, c'est-à-dire {cache:true}, ou il peut également accepter un service.

Créez un service via la méthode d'usine et injectez le service dans le contrôleur.

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");
}
})

Résumé de l’éditeur :

● En fait, c'est $cacheFactory
qui implémente le mécanisme de mise en cache ● Placez le mécanisme de mise en cache dans la requête en cours via {cache:myCache}
● $cacheFactory utilise l'API de requête comme clé, donc lors de la suppression du cache, il efface également le cache en fonction de cette clé

Ce qui précède est la méthode de mise en cache $http et de traitement de plusieurs requêtes $http dans AngularJS partagée par l'éditeur. J'espère que cela sera utile à tout le monde.