Angular 2 是目前最流行的前端框架之一，它提供了丰富的模块和组件，使得开发者可以快速构建高质量的 Web 应用程序。其中，网络请求是每个应用程序的关键部分之一。在 Angular 2 中，我们可以使用 HttpClient 模块来发送和接收 HTTP 请求。
HttpClient 简介
HttpClient 是 Angular 2 中的一个内置模块，它是一个强大的 HTTP 客户端，可以与 RESTful API 进行交互。它提供了许多功能，例如：
- 发送 GET、POST、PUT、DELETE 等 HTTP 请求
- 设置请求头和请求参数
- 处理响应数据和错误
- 支持拦截器
使用 HttpClient 可以让我们更轻松地处理网络请求，并使代码更加模块化和可维护。
使用 HttpClient 发送 HTTP 请求
要使用 HttpClient 发送 HTTP 请求，我们需要先导入 HttpClient 模块。可以在 app.module.ts 文件中添加以下代码：
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
]
})
export class AppModule { }接下来，我们可以在组件中注入 HttpClient 服务，并使用它发送 HTTP 请求。例如，以下是一个发送 GET 请求的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------- ---------------------------------
------- ---- --------
-
--
------ ----- ------------ -
----- ----
------------------- ----- ----------- --
--------- -
------------------------------------------------------------------------
---------- -- -
--------- - ---------
--
------- -- -
-------------------
-
--
-
-在这个示例中，我们在组件的构造函数中注入了 HttpClient 服务，并在 getData 方法中使用它发送 GET 请求。在响应中，我们将数据赋值给组件的 data 属性，并在模板中显示出来。
设置请求头和请求参数
HttpClient 还允许我们设置请求头和请求参数。例如，以下是一个设置请求头和请求参数的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ------------ ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------- ---------------------------------
------- ---- --------
-
--
------ ----- ------------ -
----- ----
------------------- ----- ----------- --
--------- -
----- ------- - --- ---------------------------------- ------- --------
----- ------ - --- ---------------------- -----
----------------------------------------------------------- - -------- ------ -------------
---------- -- -
--------- - ---------
--
------- -- -
-------------------
-
--
-
-在这个示例中，我们使用 HttpHeaders 和 HttpParams 类来创建请求头和请求参数。然后，我们将它们作为第二个参数传递给 get 方法。
处理响应数据和错误
HttpClient 还提供了许多方法来处理响应数据和错误。例如，我们可以使用以下方法：
- subscribe：订阅响应，可以获取响应数据和错误
- map：将响应数据转换为另一种形式
- catchError：捕获错误并返回一个新的可观察对象
以下是一个使用 map 和 catchError 方法的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ----------- --- - ---- -----------------
------ - ---------- - ---- -------
------------
--------- -----------
--------- -
------- ---------------------------------
------- ---- --------
-
--
------ ----- ------------ -
----- ----
------------------- ----- ----------- --
--------- -
-----------------------------------------------------------------
-------------- -- -
------ ----------------- ---
---
------------------ -- -
------ ------------------
--
------------
---------- -- -
--------- - ---------
--
------- -- -
-------------------
-
--
-
-在这个示例中，我们使用 map 方法将响应数据转换为前五个元素。然后，我们使用 catchError 方法捕获错误并返回一个新的可观察对象。
使用拦截器
HttpClient 还支持拦截器，可以在请求和响应之间添加处理逻辑。例如，我们可以使用以下拦截器：
- HttpInterceptor：拦截 HTTP 请求和响应
- HttpHandler：处理 HTTP 请求和响应
以下是一个使用拦截器的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ---------------- ------------ ------------ --------- - ---- -----------------------
------ - ---------- - ---- -------
------------
--------- -----------
--------- -
------- ---------------------------------
------- ---- --------
-
--
------ ----- ------------ -
----- ----
------------------- ----- ----------- --
--------- -
----------------------------------------------------------------------
---------- -- -
--------- - ---------
--
------- -- -
-------------------
-
--
-
-
-------------
------ ----- --------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
----- --------- - --------
----- ------- - -----------
-------- -------------------------------- ------- --------------
---
------ ---------------------
-
-在这个示例中，我们创建了一个名为 AuthInterceptor 的拦截器，并在其中添加了一个 Authorization 请求头。然后，我们在组件中注入 HttpClient 服务，并使用它发送 HTTP 请求。
要使用拦截器，我们需要在 app.module.ts 文件中添加以下代码：
import { HTTP_INTERCEPTORS } from '@angular/common/http';
@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
})
export class AppModule { }在这个示例中，我们将 AuthInterceptor 添加到 HTTP_INTERCEPTORS 依赖注入令牌中，以便 HttpClient 可以使用它。
结论
HttpClient 是 Angular 2 中强大的 HTTP 客户端，可以轻松地处理网络请求。在本文中，我们介绍了如何使用 HttpClient 发送 HTTP 请求、设置请求头和请求参数、处理响应数据和错误，以及使用拦截器。希望这篇文章能帮助你更好地理解 Angular 2 中的网络请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753b14e8bd460d3ada6d4ae