Angular 是一个全面的前端框架，它提供了许多有用的功能来简化前端开发。其中之一是 HttpClient，它是在 Angular 4.3 版本中引入的。HttpClient 与 Angular 的其他组件紧密集成，使得处理 HTTP 请求变得更加容易和直观。在本文中，我们将深入探讨如何使用 HttpClient 发送 HTTP 请求，以及如何对请求进行处理。
发送一个简单的 GET 请求
首先，让我们看看如何使用 HttpClient 发送最简单的请求 - GET 请求。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----- ----------- --
----------- ---- -
-----------------------------------------------------------
--------------- -- -------------------
-
-在这段代码中，我们注入了 HttpClient，并在 ngOnInit 中发送了一个 GET 请求。这个请求返回 JSON 数据，并通过 subscribe 来订阅 response。我们在数据返回后，使用 console.log 将数据打印到控制台。
使用 HttpClient 发送请求与在 jQuery 中发送请求非常相似。在上面的代码中，我们只需要传递一个 URL，然后就会从服务器获取数据。此外，我们可以使用相同的方式发送 POST、PUT、DELETE 等请求。
请求头和参数
HttpClient 提供了许多配置请求的选项。其中之一是 URL 查询参数，这使得在请求中传递参数变得非常容易。
this.http.get('https://jsonplaceholder.typicode.com/posts', { params: { id: '1' } })
.subscribe(data => console.log(data));在上面的代码中，我们传递了一个 params 对象，并将 id 设置为 1。这会将参数追加到 URL 后面，形成以下 URL： https://jsonplaceholder.typicode.com/posts?id=1
另一个请求选项是 HttpHeaders，它允许设置请求头。
-- -------------------- ---- -------
------ - ----------- - ---- -----------------------
----- ----------- - -
-------- --- -------------
--------------- ------------------
--
--
------------------------------------------------------------ ----- ------------
------------------- -- -----------------------在上面的代码中，我们创建了一个 HttpHeaders 对象，并将 Content-Type 设置为 application/json。然后，将这个对象传递给 post 方法，以确保请求头包含正确的 Content-Type。
错误处理
在请求期间，可能会发生一些错误。HttpClient 允许我们处理这些错误，并根据情况采取适当的措施。
this.http.get('https://jsonplaceholder.typicode.com/posts/99999')
.subscribe(data => console.log(data), error => console.error(error));在上面的代码中，我们试图访问不存在的文章。由于服务器无法找到文章，它返回一个 404 错误。我们在订阅中提供了两个回调函数 - 一个用于处理数据，另一个用于处理错误。当发生错误时，我们将错误信息打印到控制台，并防止用户看到错误页面或其他意外结果。
总结
HttpClient 是 Angular 中一个强大和实用的功能。此外，它还具有很好的可扩展性和可配置性，使其成为前端开发人员的首选。上面的示例展示了如何使用 HttpClient 发送各种类型的 HTTP 请求，并处理响应和错误。希望这篇文章对您有指导意义，帮助您更好的使用 Angular 中的 HttpClient。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493e2fe48841e98941769d7