Angular 是一种流行的前端框架，它提供了许多工具和库，使得开发者可以快速构建单页应用 (SPA)。在实际开发中，SPA 经常需要从服务器获取数据，这就需要使用异步数据请求。本文将介绍如何在 Angular SPA 中使用 HttpClient 进行异步数据请求。
HttpClient 简介
HttpClient 是一个 Angular 提供的库，用于在应用程序中进行 HTTP 请求。它提供了许多功能，如请求拦截器、响应拦截器、可观察的请求等。
在 Angular 中，HttpClient 可以通过注入来使用。要使用 HttpClient，首先需要在 app.module.ts 中导入 HttpClientModule：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------
-----------
-------- -
----------------
--
---
--
------ ----- --------- - -发送 GET 请求
要发送 GET 请求，我们可以使用 HttpClient 的 get() 方法。例如，我们可以发送一个 GET 请求获取用户列表：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- - -
---------- -
------ -----------------------------------------------
-
-在上面的代码中，我们定义了一个 UserService，它使用 HttpClient 发送 GET 请求获取用户列表。我们可以在组件中使用 UserService 来获取用户列表：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ------------
--------- -
----
--- ----------- ---- -- --------- --------- -------
-----
-
--
------ ----- -------------- ---------- ------ -
------ ------
------------------- ------------ ------------ - -
---------- -
--------------------------------------------- ------ -- -
---------- - ------
---
-
-在上面的代码中，我们定义了一个 UsersComponent，它使用 UserService 获取用户列表，并在模板中显示用户列表。
发送 POST 请求
要发送 POST 请求，我们可以使用 HttpClient 的 post() 方法。例如，我们可以发送一个 POST 请求创建一个新用户：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- ----------- -
------------------- ----- ----------- - -
---------------- ---- -
------ ----------------------------------------------- ------
-
-在上面的代码中，我们定义了一个 UserService，它使用 HttpClient 发送 POST 请求创建一个新用户。我们可以在组件中使用 UserService 来创建新用户：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ------------------
--------- -
----- ------------------------
------ ----------- ----------------------- ----------- -------------------
------ ------------ ------------------------ ------------ --------------------
------- -------------------- -------------
-------
-
--
------ ----- ------------------- -
---- - - ----- --- ------ -- --
------------------- ------------ ------------ - -
---------- -
--------------------------------------------------- -- -
----------------- ------- ---------------
---
-
-在上面的代码中，我们定义了一个 CreateUserComponent，它使用 UserService 创建新用户。
使用拦截器
拦截器是一种强大的工具，它可以在请求发送之前或响应返回之后对请求进行修改。在 Angular 中，我们可以使用拦截器来添加头部、处理错误等。
例如，我们可以使用拦截器添加一个身份验证头部：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ --------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- --------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
----- ------- - -----------
-------- -------------------------------- ------- - - ------------------------------
---
------ ---------------------
-
-在上面的代码中，我们定义了一个 AuthInterceptor，它在请求发送之前添加了一个身份验证头部。要使用拦截器，我们需要在 app.module.ts 中提供它：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------------
------ - --------------- - ---- ---------------------
-----------
---------- -
-
-------- ------------------
--------- ----------------
------ ----
-
--
---
--
------ ----- --------- - -在上面的代码中，我们将 AuthInterceptor 提供给 HTTP_INTERCEPTORS，这将使拦截器在每个请求中都被调用。
总结
在本文中，我们介绍了如何在 Angular SPA 中使用 HttpClient 进行异步数据请求。我们学习了如何发送 GET 和 POST 请求，以及如何使用拦截器添加头部。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655b21fbd2f5e1655d54e4e3