Comment utiliser le service $http en angulaire

Cette fois, je vais vous montrer comment utiliser le service $http en angulaire. Quelles sont les précautions lors de l'utilisation du service $http en angulaire. Voici un cas pratique, jetons un oeil.

$http service

$http(requestConfig) est juste un objet XMLHttpRequest encapsulé.

requestConfig est un objet utilisé pour envoyer des paramètres de requête.

Renvoie un objet Promise

$http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });

Lorsque la promesse revient, elle peut être appelée dans une chaîne. Vous pouvez également utiliser la méthode then pour gérer les rappels.

Si la réponse code d'état est compris entre 200 et 299, la réponse sera considérée comme réussie et le rappel de réussite sera appelé, sinon le rappel d'erreur
sera appelé .

Appelez les méthodes then(), success() et error() sur l'objet HttpPromise. La principale différence entre la méthode then() et les deux autres méthodes est qu'elle recevra l'objet de réponse complet, tandis que success() et error() détruiront l'objet de réponse.

Méthode de raccourci

$http.get
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

Objet de réponse

L'objet de réponse transmis par AngularJS à la méthode then() contient quatre propriétés.

 données (
chaîne ou objet) Ces données représentent le corps de la réponse converti (si la conversion est définie).
 statut (type numérique)
Le
code d'état HTTP de la réponse.  en-têtes (fonction)
Cette fonction est la fonction getter des informations d'en-tête, qui peut accepter un paramètre pour obtenir la valeur du nom correspondant. Par exemple, utilisez le code suivant pour obtenir la valeur de X-Auth-ID :

 config (object)

method: 'GET',url: '/api/users.json'}).then (resp) {// 读取X-Auth-ID
resp.headers('X-Auth-ID');
});

Cet objet est l'objet de paramètres complet utilisé pour générer la requête d'origine.

 statusText (string)
Cette chaîne est le texte d'état HTTP de la réponse.


Mise en cache des requêtes $http

Par défaut, le service $http ne met pas en cache les requêtes localement. Lors de requêtes individuelles, nous pouvons activer la mise en cache en transmettant une valeur booléenne ou une instance de cache à la requête

$http.

La première fois qu'une requête est envoyée, le service $http enverra une requête GET à /api/users.json. Lorsque la même requête GET

.success(function(data) {})
 .error(function(data) {});

est envoyée pour la deuxième fois, le service $http récupérera le résultat de la requête du cache sans réellement envoyer de requête HTTP GET.

Dans cet exemple, la mise en cache étant activée, AngularJS utilisera $cacheFactory par défaut. Ce service est
automatiquement créé par AngularJS lors de son démarrage.
Par exemple, si vous souhaitez utiliser le cache LRU (Least Recenlty Used, le moins récemment utilisé), vous pouvez transmettre l'objet d'instance de cache
comme suit :

chacun heure à laquelle une requête est envoyée. Passer dans un cache personnalisé est fastidieux (même dans un service). Vous pouvez définir un cache par défaut pour toutes les requêtes $http en appliquant la fonction .config() de

var lru = $cacheFactory('lru',{capacity: 20
 }); // $http请求
 $http.get('/api/users.json', { cache: lru })
 .success(function(data){})
 .error(function(data){});

 :

Désormais, toutes les requêtes utiliseront notre cache LRU personnalisé.

 angular.module('myApp', [])
      .config(function($httpProvider, $cacheFactory) {
      $httpProvider.defaults.cache = $cacheFactory('lru', {
      capacity: 20
      });
      });

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de localStorage en Html5

Code JavaScript pour créer du dynamique menus ou listes déroulantes

Code JavaScript pour déterminer la condition physique actuelle dans la mise en page correspondante

Code JavaScript pour limiter le nombre de mots de texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!