Angular 是一款强大的前端框架，可以帮助开发者快速构建现代化的 Web 应用。其中与后端交互获取数据是很重要的一部分。本文将介绍如何使用 Angular 中的 HttpClient 模块来调用服务器 API 并获取数据。
HttpClient 简介
HttpClient 是 Angular 提供的内置模块，用来发送 HTTP 请求和接收响应。相比于之前的 Http 模块，它提供了更加简洁方便的 API 和强大的类型检查功能。
要使用 HttpClient，首先需要在 Angular 应用中导入 HttpClientModule 模块并注入 HttpClient 服务。然后可在组件中使用 HttpClient 来发送请求。
发送 GET 请求
以下是如何使用 HttpClient 发送 GET 请求：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------------------- ----- ----------- --
---------- -
------------------------------------------------------------------------------ -- -
------------------
---
-
-代码中使用了 get() 方法来发送 GET 请求并订阅响应结果。在订阅的回调函数中，打印响应数据。
GET 请求还可以通过传递一个参数对象来设置请求头和 URL 参数：
this.http.get('https://jsonplaceholder.typicode.com/posts', { headers: { 'Authorization': 'Bearer token' }, params: { page: '1' } }).subscribe((data) => {
console.log(data);
});在以上示例中，请求头中带有 Authorization Token，并且 URL 参数中传递了一个名为 page 值为 1 的参数。
发送 POST 请求
以下是如何使用 HttpClient 发送 POST 请求：
this.http.post('https://jsonplaceholder.typicode.com/posts', { title: 'foo', body: 'bar', userId: 1 }).subscribe((data) => {
console.log(data);
});代码使用了 post() 方法来发送 POST 请求并订阅响应结果。在传递的参数中，包含了请求体的数据。
POST 请求也可以通过传递参数对象来设置请求头和 URL 参数。
错误处理
HTTP 请求可能会出现错误，因此需要在代码中处理这些错误。
以下是如何使用 HttpClient 来捕获错误和处理错误：
this.http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe((data) => {
console.log(data);
}, (error) => {
console.log(error);
});代码中使用了 subscribe() 方法来订阅响应，并传递两个回调函数，第一个回调函数用于处理响应结果，第二个回调函数用于处理错误。可以在错误回调函数中进行错误处理。
总结
本文介绍了如何使用 Angular 中的 HttpClient 来调用服务器 API 并获取数据。我们讨论了 GET 和 POST 请求的使用，以及如何处理错误。
在实际开发中，我们需要为 HttpClient 添加拦截器、设置基础 URL 等进一步增强它。
本文的内容对于初学 Angular 或者需要获取数据的开发者来说是非常有参考价值的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2319848841e9894e7ced7