在 Angular 应用中，发送 HTTP 请求是非常常见的操作。无论是从远程服务器获取数据还是向后端 API 发送数据，都需要发送 HTTP 请求来完成这些任务。在本文中，我们将探讨 Angular 中发送 HTTP 请求的正确方式，并提供一些示例代码来帮助您更好地学习和理解。
使用 HttpClient
Angular 为我们提供了一个强大的 HttpClient 模块，该模块封装了浏览器原生的 XMLHttpRequest 对象，使得在 Angular 应用中发送 HTTP 请求变得非常容易。我们只需要通过注入 HttpClient 来使用它，并使用其 get、post、put、delete 等方法发送 HTTP 请求。以下示例演示了如何使用 HttpClient 发送 GET 请求：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- - -
---------- -
------ ----------------------------
-
-在本例中，数据服务 DataService 注入了 HttpClient，并实现了一个名为 getItems 的方法来发送 GET 请求。在实际应用中，我们可以通过订阅 getItems 方法的返回值来处理服务器响应。
处理 HTTP 响应
默认情况下，HttpClient 返回一个 Observable 对象，我们可以通过订阅 Observable 对象来获取服务器返回的响应数据。以下示例展示了如何在 Angular 应用中处理 HTTP 响应：
this.dataService.getItems().subscribe( data => console.log(data), error => console.error(error) );
在本例中，我们使用了 dataService.getItems() 方法来获取服务器数据，并使用 subscribe 方法来订阅该方法的返回值。在 subscribe 方法中，我们可以使用两个回调函数来处理服务器响应。当请求成功时，会调用第一个回调函数并传递响应数据；当请求失败时，会调用第二个回调函数并传递错误信息。
添加请求头
在某些情况下，我们需要向 HTTP 请求添加一些自定义的请求头，比如传递一些认证信息或者请求特定的数据格式。在 Angular 中，我们可以通过 HttpHeaders 类来创建自定义的请求头，并将其添加到 HTTP 请求中。以下示例演示了如何在 Angular 应用中添加请求头：
-- -------------------- ---- -------
------ - ----------- ----------- - ---- -----------------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- - -
---------- -
----- ------- - --- ---------------------------------- ------- -----------
------ --------------------------- - ------- ---
-
-在本例中，我们使用 HttpHeaders 类创建了一个 Authorization 请求头，并将其值设置为一个访问令牌。我们将该请求头传递给 get 方法的选项对象，以便在发送请求时将其添加到 HTTP 请求中。
错误处理
当 HTTP 请求发生错误时，我们需要能够正确地处理这些错误。在 Angular 中，我们可以使用 catchError 操作符来捕获 HTTP 错误，并在应用中提供一个友好的错误消息。以下示例演示了如何在 Angular 应用中处理 HTTP 错误：
-- -------------------- ---- -------
------ - ----------- ----------------- - ---- -----------------------
------ - ---------- - ---- -------
------ - ---------- - ---- -----------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- - -
---------- -
------ ---------------------------------
----------------------------
--
-
------- ------------------ ------------------ -
-- ------------- --- ---- -
------ ---------------- --- --------
- ---- -
------ --------------------- ---- --------
-
-
-在本例中，我们使用 catchError 操作符来捕获 HTTP 错误，并在 handleError 方法中为不同的错误状态码提供不同的错误消息。在 handleError 方法中，我们可以使用 throwError 操作符来抛出一个 RxJS observable 对象，以便在订阅该方法时捕获该错误。
结论
使用 HttpClient 是在 Angular 应用中发送 HTTP 请求的最佳方式。它提供了一组易于使用的方法来发送 GET、POST、PUT、DELETE 等 HTTP 请求，并提供了一些方便的操作符来处理 HTTP 响应和错误。当您开发 Angular 应用时，请务必遵循这些最佳实践来确保代码的正确性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775c2406d66e0f9aa055b89