简介AngularJS中$http服务的用法

深入了解 AngularJS 中的 $http 服务

在 AngularJS 中，$http 服务是一个核心功能，允许开发者直接与外部服务器进行通信以获取或发送数据。实质上，$http 服务是对浏览器原生的 XMLHttpRequest 对象的简单封装，使其更加易用和高效。本文将详细介绍 $http 服务的用法及其特性。

一、链式调用与 Promise 对象

$http 服务是一个函数，接受一个对象作为参数，该对象包含了生成 HTTP 请求的配置内容。这个函数会返回一个 Promise 对象，该对象具有 success 和 error 两个方法。这意味着你可以通过链式调用的方式处理响应。例如：

```javascript

$http({

url: 'data.json',

method: 'GET'

}).success(function(data, status, headers, config) {

// 处理成功的响应

}).error(function(data, status, headers, config) {

// 处理响应失败

});

```

二、返回 Promise 对象的使用

你也可以将 $http 调用赋值给一个变量，然后使用返回的 Promise 对象来处理响应。由于 $http 方法返回一个 Promise 对象，你可以在响应返回时使用 then 方法来处理回调。then 方法会接收一个响应对象作为参数，你也可以传递两个可选的函数作为参数，分别处理成功和失败的响应。你也可以使用 success 和 error 回调来处理响应。但需要注意的是，then 方法与其他两种方法的主要区别是，它会接收到完整的响应对象，而 success 和 error 则会对响应对象进行析构。

三 快捷的 HTTP 方法

AngularJS中的$http服务：响应对象和缓存机制详解

当我们谈论AngularJS中的$http服务时，我们谈论的是从Web服务器读取数据的关键机制。让我们深入了解响应对象及其属性，以及如何使用缓存优化HTTP请求。

响应对象详解

AngularJS传递给then()方法的响应对象包含了丰富的信息。其中，data属性包含了转换后的响应体（如果进行了转换的话）。status属性则提供了HTTP状态码，而headers属性则是一个函数，用于获取对应名称的头部信息。例如，要获取X-Auth-ID的值，你可以这样操作：

```javascript

$http({

method: 'GET',

url: '/api/users.json'

}).then(function(resp) {

// 读取X-Auth-ID

console.log(resp.headers('X-Auth-ID'));

});

```

还有一个config属性，这是一个包含了生成原始请求的所有设置的完整对象。而statusText属性则是一个字符串，表示响应的HTTP状态文本。

HTTP请求的缓存机制

默认情况下，$http服务不会对请求进行本地缓存。但我们可以轻松启用缓存功能。例如：

```javascript

$http.get('/api/users.json', { cache: true })

.then(function(data) { / success处理 / })

.catch(function(error) { / 错误处理 / });

```

在这个例子中，第一次发送请求时，$http服务会向/api/users.json发送一个GET请求。当再次发送相同的GET请求时，$http服务会从缓存中检索结果，而不是再次发送HTTP GET请求。这大大减少了服务器的负载，并提高了应用的响应速度。

AngularJS默认使用$cacheFactory服务进行缓存，这是一个在AngularJS启动时自动创建的服务。如果你希望进行更多的自定义控制，可以传入一个自定义的缓存实例。

AngularJS实例：SEO优化与$http服务的应用

让我们看一个具体的AngularJS实例。这里使用$http.get()函数从服务器读取数据，并在前端展示：

```html