How to use $http service in angular-JS Tutorial-php.cn

How to use $http service in angular

php中世界最好的语言

Release： 2018-03-16 17:24:09

Original

1573 people have browsed it

This time I will show you how to use the $http service in angular. What are the precautions when using the $http service in angular? The following is a practical case, let's take a look.

$http service

$http(requestConfig) is just an encapsulated XMLHttpRequest object.

requestConfig is an object, which is the parameter for sending the request.

Return a Promise object

$http({ method: &#39;GET&#39;, url: &#39;/someUrl&#39; }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 });

Copy after login

When promise returns, it can be called in a chain. You can also use the then method to handle callbacks.

If the response status code is between 200 and 299, the response will be considered successful and the success callback will be called, otherwise the error
callback will be called.

Call the then(), success() and error() methods on the HttpPromise object. 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.

Shortcut method

$http.get
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

Copy after login

Response object

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

 data (
String or object) This data represents the converted response body (if conversion is defined).
 status (numeric type)
The
HTTP status code of the response.  headers (function)
This function is the getter function of header information, which can accept a parameter to obtain the value of the corresponding name. For example, use the following code to obtain the value of X-Auth-ID:

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

Copy after login

 config (object)

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.

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.

.success(function(data) {})
 .error(function(data) {});

Copy after login

The first time a request is sent, the $http service will send a GET request to /api/users.json. When the same GET

request is sent for the second time, the $http service will retrieve the request result from the cache without actually sending an HTTP GET request.

In this example, because caching is enabled, AngularJS will use $cacheFactory by default. This service is
automatically created by AngularJS when it starts.
For example, if you want to use LRU (Least Recenlty Used, least recently used) cache, you can pass in the
cache instance object as follows:

var lru = $cacheFactory(&#39;lru&#39;,{capacity: 20
 }); // $http请求
 $http.get(&#39;/api/users.json&#39;, { cache: lru })
 .success(function(data){})
 .error(function(data){});

Copy after login

Pass it every time you send a request Inserting a custom cache is cumbersome (even within a server). You can set a default cache for all $http requests by applying the

.config() function:

 angular.module(&#39;myApp&#39;, [])
      .config(function($httpProvider, $cacheFactory) {
      $httpProvider.defaults.cache = $cacheFactory(&#39;lru&#39;, {
      capacity: 20
      });
      });

Copy after login

Now, all requests will use our custom LRU cache.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!