在 AngularJS 中，$http 服务是用于在应用程序中发起 HTTP 请求的主要服务。使用 $http 服务可以轻松地与服务器交互，获取数据并将数据显示在网页上。本文将深入探讨 $http 服务的用法，并提供示例代码来指导读者如何使用该服务。
发送 HTTP 请求
要使用 $http 服务发送 HTTP 请求，我们需要使用以下格式来编写代码：
------- ------- --- ---- --- -------- --- ----- -- -------------------------- - -- --------- -- ------------------ - -- ------- ---
上述代码中，我们首先创建了一个对象，其中包含客户端发送到服务器的请求参数。这些参数包括方法（method）、URL（url）、请求头（headers）和数据（data）。接着，我们使用 then 函数来处理服务端响应。如果响应成功，则会执行 onSuccess 函数，否则会执行 onError 函数。
在这里，我们需要注意的是，method 参数的值应该是一个字符串，表示使用哪种 HTTP 方法发送请求。例如，GET、POST、PUT、DELETE 等。而 URL 参数则应该是一个字符串，表示请求的服务器地址。在请求头中，我们可以设置一些额外的信息，例如授权、凭证等。在数据部分，我们可以提供一些输入数据，以便下载或上传数据到服务器。
以下是一个完整的示例代码：
-------
------- ------
---- ----------------------------------------
-------- -
---------------- ------- --------------------------------------
--
----- -
----- ---- ------
-
-------------------------- -
----------------------
-- ------------------ -
----------------------
---在上述示例代码中，我们向 GitHub API 发起了一个 GET 请求。我们使用了一个授权信息，并一起发送了一个请求参数。如果响应成功，我们将在控制台中看到响应结果。如果出现错误，我们也将在控制台中看到错误信息。
处理响应
一旦我们收到 HTTP 响应，就需要在客户端上进行处理。以下是一些常见的处理方式：
1. 获取返回的数据
我们可以使用 response 对象来访问服务器返回的数据。响应数据可以是一个 JSON、HTML、XML 或纯文本。示例代码如下：
------- ------- ------ ---- --------------------------------------- -------------------------- - --- ---- - -------------- ------------------ -- ------------------ - ---------------------- ---
在上述示例代码中，我们使用 response.data 获取了响应数据，并在控制台中打印出来。
2. 获取响应状态码
HTTP 响应包含一个状态码，表示服务器对请求的状态。以下是一些常见的状态码：
- 200: 表示请求成功。
- 400: 表示客户端发送的请求有误。
- 404: 表示未找到匹配的资源。
- 500: 表示服务器上发生了错误。
我们可以使用 response.status 来获取状态码。示例代码如下：
------- ------- ------ ---- --------------------------------------- -------------------------- - --- ------ - ---------------- -------------------- -- ------------------ - ---------------------- ---
在上述示例代码中，我们使用 response.status 获取了状态码，并在控制台中打印出来。
3. 获取响应头
在 HTTP 响应中，响应头包含一些元数据信息，例如内容类型、日期、长度等。我们可以使用 response.headers 来获取响应头。示例代码如下：
------- ------- ------ ---- --------------------------------------- -------------------------- - --- ------- - ------------------- --------------------- -- ------------------ - ---------------------- ---
在上述示例代码中，我们使用 response.headers() 获取了响应头，并在控制台中打印出来。
处理异常
在发送 HTTP 请求时，可能会出现一些异常情况。以下是一些常见的异常情况：
1. 网络连接失败
如果网络连接不稳定或者服务器无法连接，则会出现网络连接失败的异常。需要注意的是，在连接失败时，我们在控制台中看到的是一个错误对象，而不是响应对象。示例代码如下：
------- ------- ------ ---- --------------------------------------- -------------------------- - ---------------------- -- --------------- - ------------------- ---
在上述示例代码中，我们使用 then 函数来处理 HTTP 响应。不过，在连接失败时，我们将接收到一个错误对象而不是响应对象，所以需要处理这个错误对象。
2. 服务器错误
如果服务器发生错误，会出现服务器错误的异常。如果服务器返回的状态码是 500，则表示服务器发生错误。在处理此类异常时，应该向用户显示有关错误的信息。示例代码如下：
-------
------- ------
---- ---------------------------------------
-------------------------- -
----------------------
-- ------------------ -
-- ---------------- --- ---- -
--------------------------------
-
---在上述示例代码中，我们将服务器错误的状态码设置为 500，并使用 displayErrorMessage 函数向用户显示错误信息。
结论
$ http 服务是 AngularJS 中常用的服务，它可以让我们轻松地与服务器交互，获取数据并将数据显示在网页上。在本文中，我们学习了如何使用 $http 服务来发送 HTTP 请求、处理响应和异常。我们希望本文能为您提供足够的指导，让您能够更好地利用 $http 来开发出色的 Web 应用程序。
示例代码：https://codepen.io/anon/pen/wvvVgE
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67294ec22e7021665e23e9aa