在前端开发中，我们经常需要通过 HTTP 请求获取服务端的数据，而 Angular 中的 HTTP 模块可以帮助我们简单地发送和接收 HTTP 请求，本文将详细介绍 Angular 服务中 Http 请求及其返回格式的处理方法。
发送 HTTP 请求
要发送 HTTP 请求，我们需要使用 Angular 中的 HttpClient。HttpClient 是 Angular 中用于发起 HTTP 请求的主要方式，是对 XMLHttpRequest 和 Fetch 的包装。以下是一个简单的发送 GET 请求的示例代码：
------ - ---------- - ---- -----------------------
------------------- ----- ----------- --
---------------------------------------------
--------------------- -- -
----------------------
---上述代码中，我们使用 HttpClient 的 get() 方法发送了一个 GET 请求，请求了 https://api.example.com/data 这个 URL，然后使用 subscribe() 方法来订阅响应，当响应数据返回时，我们将其输出到控制台。
使用 HttpClient 发送 POST 请求也很简单，只需稍微修改一下代码即可：
---------------------------------------------- - ----- --------- --
--------------------- -- -
----------------------
---上述代码中，我们使用 post() 方法发送了一个 POST 请求，并传递了一个数据对象 { data: 'example' }。
处理 HTTP 响应
当 HttpClient 发送请求并从服务器收到响应时，HttpClient 将其包装在一个响应对象中，这个响应对象包含了 HTTP 响应中的元数据，例如状态码、头信息等，以及响应的数据。以下是一个简单的获取响应数据的示例代码：
---------------------------------------------
--------------------- -- -
---------------------------
---上述代码中，我们输出了响应的数据部分，即 response.body。
除了获取响应数据之外，我们还可以通过响应对象获取其他信息，例如状态码、头信息等：
---------------------------------------------
--------------------- -- -
-----------------------------
------------------------------
---上述代码中，我们分别输出了状态码和头信息。
处理 HTTP 返回格式
在实际应用中，服务端可能会以不同的格式返回数据，例如 JSON、XML、纯文本等，HttpClient 可以自动检测和解析大多数常见的格式，例如 JSON。以下是一个使用 HttpClient 获取 JSON 数据的示例代码：
--------- ---- -
----- -------
---- -------
-
---------------------------------------------------
--------------------- -- -
----------------------
---上述代码中，我们使用了一个 Data 接口来定义返回的 JSON 数据格式，然后使用 get() 方法请求了 https://api.example.com/data 这个 URL，HttpClient 会自动将返回的 JSON 数据解析成 Data 类型的对象。
如果服务端返回的不是 JSON 格式的数据，HttpClient 就不能自动解析，此时我们需要手动处理返回的数据。例如，如果服务端返回的是一个文本字符串，我们可以按照以下方式解析：
--------------------------------------------- - ------------- ------ --
--------------------- -- -
----------------------
---上述代码中，我们通过将 responseType 设置为 'text' 来告诉 HttpClient 返回的数据是一个文本字符串，然后可以将其输出到控制台。
处理 HTTP 错误
当 HTTP 请求出错时，HttpClient 会将错误包装在一个 HttpErrorResponse 对象中并通过订阅错误的方式将其传递给我们。以下是一个简单的处理 HTTP 错误的示例代码：
---------------------------------------------
-----------
---------- -- -
----------------------
--
------- -- -
------------------------------
-
--上述代码中，我们通过传递一个第二个回调函数来订阅错误，当请求出错时会执行该回调函数，输出错误信息。
除了 statusText 属性之外，HttpErrorResponse 对象还包含了其他有用的信息，例如错误码、错误信息等。可以使用以下代码输出所有错误信息：
---------------------------------------------
-----------
---------- -- -
----------------------
--
------- -- -
-------------------
-
--总结
Angular 中的 HTTP 模块提供了丰富的功能，可以帮助我们简单地发送和接收 HTTP 请求。在使用 HttpClient 发送请求时，我们需要处理返回数据的格式、错误信息等，本文介绍了一些常用的处理方法和示例代码，希望对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648e3ec148841e9894c991b5