Comment utiliser le serveur HTTP dans AngularJS

Cette fois, je vais vous montrer comment utiliser le serveur http dans angulairejs, et quelles sont les précautions d'utilisation du serveur http dans angulairejs. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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 le renvoyer dans la réponse Utilisez la méthode then pour gérer les rappels. 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 est qu'elle reçoit l'objet de réponse complet, tandis que success() et error () détruira 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ù config est facultatif

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

4 Vous pouvez également utiliser $http comme fonction, auquel cas vous devez passer. dans Un objet de paramètres qui décrit comment construire l'objet XHR.

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

L'objet de paramétrage 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 (mappe de chaînes ou objet)

La valeur de cette clé est une mappe de chaînes 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'}
});

④data (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 au then( ) contient quatre attributs.

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

◇status : Code d'état HTTP de la réponse

◇headers : Cette fonction est Le La fonction getter des informations d'en-tête 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');
});

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

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 :

Résumé des méthodes courantes d'interception de chaînes JavaScript

Comment utiliser vue keep-alive pour demander des données

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!