Préface
$ HTTP Service: il encapsule simplement l'objet XMLHttpRequest natif du navigateur et reçoit un paramètre. Ce paramètre est un objet qui contient le contenu de configuration utilisé pour générer des demandes HTTP. Cette fonction renvoie un objet promise avec success et méthodes error .
Utilisez des scénarios de service HTTP:
var promest = $ http ({méthode: "post", // peut être get, poster, mettre, supprimer, diriger, jsonp; couramment utilisé est get, postul: "./ data.json", // demande paramètres de chemin: {'name': 'Lisa'}, // passer les paramètres, la carte de la chaîne ou l'objet, et le convertissement lors de l'envoi du formulaire Lisa suivi par le formulaire de demande: / est généralement utilisé lors du formulaire Lisa suivi par le formulaire de requête Données: / Blob, Habituellement Utilisé = Lisa Form request, envoyer des données binaires et utiliser un objet BLOB.}). Success (fonction (données) {// Réponse fonctionne avec succès}). Erreur (fonction (données) {// Réponse Échec (réponse renvoyée dans un état d'erreur) Opération}) then() Fonction: vous pouvez utiliser la fonction then() pour gérer le rappel du service $ http. then() la fonction accepte deux fonctions facultatives comme paramètres pour représenter le traitement lorsque success ou error . Vous pouvez également utiliser des rappels success et error à la place:
then(successFn, errFn, notifyFn) , que promise réussit ou échoue, lorsque le résultat est disponible, then appelle immédiatement successFn ou errFn de manière asynchrone. Cette méthode appelle toujours la fonction de rappel avec un paramètre: le résultat ou la raison du rejet.
Avant que promise ne soit exécutée ou rejetée, notifyFn peut être appelé 0 à plusieurs fois pour fournir une invite pour l'état de processus.
promesse.then (fonction (resp) {// appelé lorsque la réponse réussit, resp est un objet de réponse}, fonction (resp) {// appelé lorsque la réponse échoue, respol a un message d'erreur}); L'objet resp (réponse) reçu par la fonction then() contient 5 propriétés:
1. Données (chaîne ou objet): corps de réponse
2. Statut: le code d'état HTTP correspondant, tel que 200
3. En-têtes (fonction): une fonction Getter avec des informations d'en-tête, qui peuvent accepter un paramètre pour obtenir la valeur du nom correspondant.
4. Config (objet): génère l'objet de réglage complet de la demande d'origine
5. Statustext: le texte d'état HTTP correspondant, tel que "OK"
Ou utilisez la méthode success/error , utilisez
// gérer avec succès promesse.success (fonction (données, statut, en-têtes, config) {// Traiter la réponse réussie}); // Gestion d'erreurs Promise.Error (fonction (données, statut, en-têtes, config) {// Traitement la réponse non successive});Exemples d'utilisation:
index.html
<! doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> $ http request test </ title> <script src = "../ js / angular.js"> </ script> <script src = "app.js"> </script> </head> <dody> Data-ng-Controller = "MyAppController" Data-ng-Init = "LoadData ()"> <Sweet> <THEAD> <TR> <TH> NAME </ TH> <TH> <td> {{data.attr}} </td> </tr> </tbody> </s table> </div> </ body> </html>app.js
var myhttpapp = angular.module ("myApp", []); myhttpapp.Controller ("myAppController", fonction ($ q, $ http, $ scope) {var deffer = $ q.defer (); var data = new blob ([{"name": "zhangsan"}]) $ scope.Loady. $ http ({méthode: "post", url: "./ data.json", cache: true}). Success (function (data) {deffer.resolve (data);}). Error (function (data) {deffer.reject (data);}) promesse.then (function (data) {$ Scope.mydata = data.data;}) /*promise.success (fonction (data) {$ scope.mydata = données;}) * /}})data.json
[{"name": "zhangsan", "att": "China"}, {"name": "lisa", "att": "usa"}, {"name": "bob", "att": "uk"}], {"name": "jecy", "att": "jepan"}]]résultat:
L'objet resp est renvoyé lors de l'appel de la fonction then() :
Résumer
Les applications et paramètres couramment utilisés du service $ HTTP dans AngularJS sont essentiellement terminés. J'espère que le contenu de cet article sera utile à tout le monde d'apprendre à utiliser AngularJS. Si vous avez des questions, veuillez laisser un message pour communiquer.