Introduction à l'utilisation du service $http dans AngularJS_AngularJS

Nous pouvons utiliser le service $http intégré pour communiquer directement avec le monde extérieur. Le service $http encapsule simplement l'objet XMLHttpRequest natif du navigateur.

1. Appel en chaîne

Le service $http est une fonction qui ne peut accepter qu'un seul paramètre. Ce paramètre est un objet qui contient le contenu de configuration utilisé pour générer des requêtes HTTP. Cette fonction renvoie un objet de promesse avec deux méthodes : succès et erreur.

$http({
url:'data.json',
method:'GET'
}).success(function(data,header,config,status){
//响应成功
}).error(function(data,header,config,status){
//处理响应失败
});

2. Renvoyer un objet de promesse

var promise=$http({
method:'GET',
url:"data.json"
});

Puisque la méthode $http renvoie un objet de promesse, nous pouvons utiliser la méthode then pour gérer le rappel lorsque la réponse revient. Si vous utilisez la méthode then, vous obtiendrez un paramètre spécial, qui représente les informations de réussite ou d'échec de l'objet correspondant, et pourrez également accepter deux fonctions facultatives comme paramètres. Vous pouvez également utiliser des rappels de réussite et d'erreur à la place.

promise.then(function(resp){
//resp是一个响应对象
},function(resp){
//带有错误信息的resp
});

Ou ceci :

promise.success(function(data,status,config,headers){
//处理成功的响应
});
promise.error(function(data,status,hedaers,config){
//处理失败后的响应
});

La principale différence entre la méthode

then() et les deux autres méthodes est qu'elle recevra un objet de réponse complet, tandis que success() et error() détruiront l'objet de réponse.

3. Demande d'obtention rapide

①$http.get('/api/users.json');

La méthode get() renvoie l'objet HttpPromise.

Vous pouvez également envoyer, par exemple : delete/head/jsonp/post/put Veuillez vous référer à la page 148 pour les paramètres spécifiques acceptables dans la fonction

.

② Reprenons l'exemple de l'envoi d'une requête jsonp : Afin d'envoyer une requête JSONP, l'url doit contenir le mot JSON_CALLBACK.

jsonp(url,config) où la configuration est facultative

var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");

4. Vous pouvez également utiliser $http comme fonction. Dans ce cas, vous devez transmettre un objet settings pour expliquer comment construire l'objet XHR.

$http({
method:'GET',
url:'/api/users.json',
params:{
'username':'tan'
});

L'objet settings peut contenir les clés principales suivantes :

①méthode

Peut être : GET/DELETE/HEAD/JSONP/POST/PUT

②url : cible de requête absolue ou relative
③params (carte de chaînes ou objet)
La valeur de cette clé est une mappe de chaîne ou un objet, qui sera converti en chaîne de requête et ajouté à l'URL. Si la valeur n'est pas une chaîne, elle sera sérialisée JSON.
Par exemple :

//参数会转为？name=ari的形式
$http({
params:{'name':'ari'}
});

④données (chaîne ou objet)

Cet objet contient les données qui seront envoyées au serveur comme corps du message. Généralement utilisé lors de l'envoi de requêtes POST.

À partir d'AngularJS 1.3, il peut également envoyer des données binaires dans les requêtes POST. Pour envoyer un objet blob, vous pouvez simplement le transmettre en utilisant le paramètre data.
Par exemple :

var blob=new Blob(['Hello world'],{type:'text/plain'});
$http({
method:'POST',
url:'/',
data:blob
});

4. Objet de réponse

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

données

Ces données représentent le corps de la réponse converti (si la conversion est définie)

statut

Code d'état HTTP de réponse

en-têtes

Cette fonction est la fonction getter des informations d'en-tête, qui peut accepter un paramètre pour obtenir la valeur de nom correspondante

Par exemple, utilisez le code suivant pour obtenir la valeur de X-Auth-ID :

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

configuration

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

statusText(String)

Cette chaîne est le texte d'état HTTP de la réponse.

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

$http.get('/api/users.json',{ cache: true })
.success(function(data) {})
.error(function(data) {});

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

Si vous souhaitez un contrôle plus personnalisé sur le cache utilisé par AngularJS, vous pouvez transmettre une instance de cache personnalisée à la requête au lieu de true.

Laissez-moi vous parler des connaissances AngularJS $http.

AngularJS $http est un service de lecture de données sur le serveur web.

$http.get(url) est une fonction utilisée pour lire les données du serveur.

Exemple AngularJS

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response.records;});
});
</script>