前言
AngularJS 是一个流行的前端 JavaScript 框架，它提供了丰富的工具和服务来帮助开发者轻松构建功能强大且易于维护的 Web 应用程序。其中，$http 是 AngularJS 中最重要的服务之一，它提供了各种功能来帮助我们处理和管理 HTTP 请求和响应。
本文将深入介绍 AngularJS 中的 $http 服务，并提供实际示例，以便读者了解如何在 AngularJS 应用程序中使用 $http 来创建、发送和处理 HTTP 请求和响应。
什么是 $http？
$http 是 AngularJS 中的一个核心服务，它提供了许多方法来帮助我们创建、发送和处理 HTTP 请求和响应。使用 $http，我们可以轻松地与后端服务器交互，获取数据、发送表单、上传文件、与 WebSockets 通信等。
$http 的基本用法
使用 $http 发送 HTTP 请求非常简单。下面是一个使用 $http 发送 GET 请求的示例：
$http({
method: 'GET',
url: '/api/users'
}).then(function (response) {
// 请求成功，处理响应数据
}, function (response) {
// 请求失败
});上面的代码使用 $http 的 get 方法发送一个 GET 请求到 /api/users 接口，并在请求成功或失败时执行相应的处理函数。
$http 的所有方法都返回一个 promise 对象，我们可以使用 then 方法来处理成功或失败的响应。
下面是一个示例，演示如何使用 $http 发送 POST 请求：
-- -------------------- ---- -------
-------
------- -------
---- -------------
----- -
--------- -------
--------- ------
-
---------------- ---------- -
-- -----------
-- -------- ---------- -
-- ----
---上面的代码使用 $http 的 post 方法发送一个 POST 请求到 /api/login 接口，并提供一个包含用户名和密码的数据对象。
$http 的高级用法
除了基本的 GET 和 POST 请求外，$http 还提供了许多高级功能和选项来帮助我们更好地管理和处理 HTTP 请求和响应。下面是一些常用的高级选项和用法：
发送表单数据
使用 $http 发送表单数据非常简单，只需将表单数据对象传递给 data 选项即可：
-- -------------------- ---- -------
-------
------- -------
---- -------------
----- -
----- ----- -----
------ ----------------------
--
-------- -
--------------- -----------------------------------
--
----------------- -------- ------ -
--- -------- - ---
--- ---- --- -- ----- -
------------------------------------- - --- - -------------------------------
-
------ -------------------
-
---------------- ---------- -
-- -----------
-- -------- ---------- -
-- ----
---上面的代码使用 $http 的 post 方法将一个表单数据对象发送到 /api/users 接口。注意，我们还需要设置 Content-Type 头部为 application/x-www-form-urlencoded，并设置 transformRequest 方法来将表单数据对象转换为 URL 编码格式数据。
设置请求头
如果需要在请求头中添加额外的信息，可以使用 $http 的 headers 选项：
-- -------------------- ---- -------
-------
------- ------
---- -------------
-------- -
--------------- -----------
---------------- ------ -----------------------------
-
---------------- ---------- -
-- -----------
-- -------- ---------- -
-- ----
---拦截器
$http 还提供了一些拦截器，用于在请求或响应结束时执行额外的逻辑。例如，我们可以使用 $httpProvider 的 interceptors 属性来注册一个请求拦截器：
-- -------------------- ---- -------
--------------------- --------------- -
---------------------------------------- -- -
------ -
-------- -------- -------- -
-- -----------
------ -------
--
--------- -------- ---------- -
-- -----------
------ ---------
-
--
---
---上面的代码注册了一个简单的请求拦截器，在请求开始前和响应结束后执行一些逻辑。
取消请求
有时候我们需要取消一个正在运行的请求，以避免浪费网络带宽和系统资源。$http 提供了一个 cancel 方法，用于取消一个正在进行的请求：
-- -------------------- ---- ------- --- -------- - ----------- ------- ------- ------ ---- ------------- -------- ---------------- ---------------- ---------- - -- ----------- -- -------- ---------- - -- ---- --- -- ------------ ------ -- -------------------
上面的代码定义了一个 canceler，并将其传递给请求的 timeout 选项。如果我们需要取消请求，只需调用 canceler 的 resolve 方法即可。
结论
在本文中，我们深入介绍了 AngularJS 中的 $http 服务，并提供了实际示例，以便读者了解如何在 AngularJS 应用程序中使用 $http 来创建、发送和处理 HTTP 请求和响应。$http 是一个非常有用的工具，可以帮助我们快速构建强大的 Web 应用程序，并提供各种高级选项和功能来满足我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670c7abbbe090acdb8480ac0