Preface
$http service: It simply encapsulates the browser's native XMLHttpRequest object and receives a parameter. This parameter is an object that contains the configuration content used to generate HTTP requests. This function returns a promise object with success and error methods.
Use scenarios of $http service:
var promise = $http({method:"post", // can be get,post,put, delete,head,jsonp; commonly used is get,posturl:"./data.json", //Request path params:{'name':'lisa'}, //Pass parameters, string map or object, and convert it into ?name=lisa form followed by the request path data:blob, //Usually used when sending post request, send binary data and use blob object.}).success(function(data){//Response successfully operated}).error(function(data){//Response failed (response returned in an error state) operation}) then() function: You can use the then() function to handle the callback of the $http service. then() function accepts two optional functions as parameters to represent the processing when success or error state. You can also use success and error callbacks instead:
then(successFn, errFn, notifyFn) , whether promise succeeds or fails, when the result is available, then immediately calls successFn or errFn asynchronously. This method always calls the callback function with one parameter: the result, or the reason for rejection.
Before promise is executed or rejected, notifyFn callback may be called 0 to multiple times to provide a prompt for the process state.
promise.then(function(resp){//Called when the response is successful, resp is a response object}, function(resp){//Called when the response fails, resp has an error message}); The resp (response object) received by the then() function contains 5 properties:
1. data (string or object): response body
2. status: the corresponding http status code, such as 200
3. headers (function): a getter function with header information, which can accept a parameter to obtain the value of the corresponding name.
4. config (object): generates the complete setting object of the original request
5. statusText: The corresponding http status text, such as "ok"
Or use the success/error method, use
//Successfully handle promise.success(function(data, status, headers, config){// Processing successful response});// Error handling promise.error(function(data, status, headers, config){// Processing non-successful response});Examples of usage:
index.html
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>$http request test </title> <script src="../js/angular.js"></script> <script src="app.js"></script></head><body><div data-ng-app="myApp" data-ng-controller="myAppController" data-ng-init="loadData()"> <table> <thead> <tr> <th>Name</th> <th>Properties</th> </tr> </tbody> <tbody> <tr data-ng-repeat="data in myData"> <td>{{data.name}}</td> <td>{{data.attr}}</td> </tr> </tbody> </table></div></body></html>app.js
var myHttpApp = angular.module("myApp",[]);myHttpApp.controller("myAppController",function($q,$http,$scope){ var deffer = $q.defer(); var data = new Blob([{ "name":"zhangsan" }]) $scope.loadData = function(){ var promise = $http({ method:"post", url:"./data.json", cache: true }).success(function(data){ deffer.resolve(data); }).error(function(data){ deffer.reject(data); }) promise.then(function(data){ $scope.myData = data.data; }) /*promise.success(function(data){ $scope.myData = data; })*/ }})data.json
[ {"name":"zhangsan","attr":"China"}, {"name":"lisa","attr":"USA"}, {"name":"Bob","attr":"UK"}, {"name":"Jecy","attr":"Jepan"}]result:
The resp object returned when calling the then() function:
Summarize
The commonly used applications and parameters of the $http service in AngularJS are basically over. I hope that the content of this article will be helpful to everyone to learn to use AngularJS. If you have any questions, please leave a message to communicate.