Objective
$http Service: Simply encapsulates the native object of the browserXMLHttpRequestand receives a parameter that is an object that contains the configuration content used to generate the HTTP request, which returns anpromiseobject withsuccessanderrormethods.
Usage Scenarios for $http services:
var promise = $http ({method
: Post, //Can be get,post,put, DELETE,HEAD,JSONP, often using get,post
URL: "./ Data.json ", ///request path
params:{' name ': ' Lisa '},///pass parameter, string map or object, convert to? The Name=lisa form follows the request path
Data:blob,//typically used when sending a POST request, sending binary data with a BLOB object.
}). Success (function (data) {/
/Response successful Operation
}). Error (function (data) {
//Response failure (response returned in Error state) action
})
then()Functions: You can usethen()functions to handle callbacks of the $http service, whichthen()accept two optional functions as arguments, representationssuccessorerrorstate processing, or usesuccessanderrorcallback instead:
then(successFn, errFn, notifyFn), regardless ofpromisesuccess or failure, when the result is available, it isthenimmediately called asynchronouslysuccessFnorerrFn. This method always invokes a callback function with one argument: the result, or the reason for the rejection.
ThepromisenotifyFncallback may be invoked 0 to several times before being executed or rejected to provide prompt for the status of the procedure
Promise.then (function (RESP) {
//Response successful call, RESP is a response object
}, function (RESP) {
//response failed, RESP with error message
}) ;
then()The RESP (Response object) received by the function contains 5 properties:
1. Data (String or object): response body
2. Status: corresponding HTTP state code, such as 200
3. Headers (function): header information of the Getter function, you can accept a parameter, to get the corresponding name of the value
4. config (object): generate the full set object of the original request
5. StatusText: corresponding HTTP status text, such as "OK"
Or usesuccess/errorthe method, using the
Successfully processed
promise.success (function (data, status, headers, config) {
//Processing successful response
});
Error handling
promise.error (function (data, status, headers, config) {
//Process unsuccessful response
});
Use instance:
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>名称</th>
<th>属性</th>
</tr>
</thead>
<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 ': ' The ' ',
{' name ': ' Lisa ', ' attr ': ' USA '},
{' name ': ' Bob ', ' attr ': ' UK '},
{' name ': ' Jecy ', ' attr ': ' Jepan '}
]
Results:
then()the object returned when the function is calledresp:
Summarize
Angularjs $http services commonly used in the application and parameters to this end, I hope the content of this article can help you learn to use ANGULARJS. If you have questions, you can exchange messages.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
