$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.