Introduction à l'utilisation du service $http dans 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. Ensuite, cet article vous donnera une brève introduction à l'utilisation du service http dans angulairejs. Les amis qui l'aiment peuvent se référer à

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, y compris le To. générer le contenu de configuration de la requête 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 comme 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 La différence est qu'elle recevra l'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 Pour plus de détails sur les paramètres acceptables dans la fonction, veuillez vous référer à la page 148

② pour un exemple de. envoi d'une requête jsonp : Afin d'envoyer une requête JSONP, où L'url doit contenir les mots 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 :

①method

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

②url : cible de requête absolue ou relative
③params (string map ou object)
La valeur de cette clé est une string map ou L'objet sera être 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'}
});

④data (chaîne ou objet)

Cet objet contient des informations qui seront envoyées en tant que données du corps du message à le serveur. 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. L'objet de réponse

AngularJS est transmis à L'objet de réponse de 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

Le code d'état HTTP de réponse

en-têtes

Cette fonction est la fonction getter des informations d'en-tête et peut accepter un paramètre pour obtenir le nom correspondant value

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

config

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.

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 la fonction utilisée pour lire les données du serveur.

Exemple AngularJS

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

Pour plus de didacticiels connexes, veuillez visiter le Tutoriel de base de JavaScript