Explication détaillée de la façon d'utiliser le service $http dans AngularJS

Cette fois, je vais vous apporter une explication détaillée de la façon d'utiliser le service $http dans AngularJS Quelles sont les notes du service $http dans AngularJS Voici des informations pratiques. cas. 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 JSON sérialisée.

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. Habituellement utilisé lors de l'envoi d'une demande POST.

À partir d'AngularJS 1.3, il peut également envoyer des données binaires dans des 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 : Le code d'état HTTP de la réponse

◇en-têtes : Cette fonction est une fonction getter pour les informations d'en-tête. Elle 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) {});

第一次发送请求时，$http服务会向/api/users.json发送一个GET请求。第二次发送同一个GET请求时，$http服务会从缓存中取回请求的结果，而不会真的发送一个HTTP GET请求。
在这个例子里，由于设置了启用缓存，AngularJS默认会使用$cacheFactory,这个服务是AngularJS在启动时自动创建的。

如果想要对AngularJS使用的缓存进行更多的自定义控制，可以向请求传入一个自定义的缓存实例代替true。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

php生成随机数字、字母或数字字母混合的字符串

nginx内php动态裁剪图片步骤详解

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!