Detailed explanation of how to use $http service in AngularJS-JS Tutorial-php.cn

This time I will bring you a detailed explanation of how to use the $http service inAngularJS, what are theprecautionsof the $http service in AngularJS, the following is a practical case, let’s take a look .

We can use the built-in $http service to communicate directly with the outside world. The $http service simply encapsulates the browser's native XMLHttpRequest object.

1. Chain call

#$http service is a function that can only accept one parameter. This parameter is an object, including the To generate the configuration content of the HTTP request. This function returns a promise object with two methods: success and error.

$http({ url:'data.json', method:'GET' }).success(function(data,header,config,status){ //响应成功 }).error(function(data,header,config,status){ //处理响应失败 });

Copy after login

2. Return a promise object

var promise=$http({ method:'GET', url:"data.json" });

Copy after login

Since the $http method returns a promise object, we can use the then method when the response returns to handle callbacks. If you use the then method, you will get a special parameter, which represents the success or failure information of the corresponding object, and can also accept two optional functions as parameters. Or you can use success and error callbacks instead.

promise.then(function(resp){ //resp是一个响应对象 },function(resp){ //带有错误信息的resp });

Copy after login

Or like this:

promise.success(function(data,status,config,headers){ //处理成功的响应 }); promise.error(function(data,status,hedaers,config){ //处理失败后的响应 });

Copy after login

The main difference between the then() method and the other two methods is that it will receive the complete response object, while success() and error() will Destruct the response object.

3. Quick get request

①$http.get('/api/users.json');

get() method returns HttpPromise object.

You can also send, for example: delete/head/jsonp/post/put. Please refer to page 148 for specific parameters acceptable in the function.

② Take the example of sending a jsonp request again: In order to send a JSONP request, where The url must contain the words JSON_CALLBACK.

jsonp(url,config) where config is optional

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

Copy after login

4. You can also use $http as a function. In this case, you need to pass in a setting Object, used to illustrate how to construct an XHR object.

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

Copy after login

The setting object can contain the following main keys:

①method

can be: GET/DELETE/HEAD/JSONP/POST/PUT

②url: absolute or relative request target

③params (string map or object)

The value of this key is a string map or object, which will be converted The query string is appended to the URL. If the value is not a string, it will beJSON serialized.

For example:

//参数会转为？name=ari的形式 $http({ params:{'name':'ari'} });

Copy after login

④data (string or object)

This object contains the data that will be sent to the server as the message body. Typically used when sending aPOST request.

Starting from AngularJS 1.3, it can also send binary data in POST requests. To send a blob object, you can simply pass it by using the data parameter.

For example:

var blob=new Blob(['Hello world'],{type:'text/plain'}); $http({ method:'POST', url:'/', data:blob });

Copy after login

4. Response object

The response object passed by AngularJS to the then() method contains four attributes.

◇data: This data represents the converted response body (if conversion is defined)

◇status: TheHTTP status code of the response

◇headers: This function is a getter function for header information. It can accept a parameter to obtain the corresponding name value.

For example, use the following code to obtain the value of X-Auth-ID:

$http({ method: 'GET', url: '/api/users.json' }).then (resp) { // 读取X-Auth-ID resp.headers('X-Auth-ID'); });

Copy after login

◇config: This object is the complete settings object used to generate the original request.

◇statusText (string): This string is the HTTP status text of the response.

5. Caching HTTP requests

By default, the $http service does not cache requests locally. When making individual requests, we can enable caching by passing a boolean value or a cache instance to the $http request.

$http.get('/api/users.json',{ cache: true }) .success(function(data) {}) .error(function(data) {});

Copy after login

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

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

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