在 Angular 中，HTTP 请求是一个非常常见的需求。它是与后台交互数据的一种方式。但是，由于网络和服务器的不确定性，这些请求可能会失败，或者需要跟踪错误信息。如果您不采取正确的方法，管理 HTTP 请求可能会让代码变得更加混乱。本文将介绍 Angular 中如何管理 HTTP 请求，并引导您使用 Angular 提供的 HTTPInterceptors 和 RxJS 一起管理 HTTP 请求。
发送 HTTP 请求
要发送 HTTP 请求，首先需要在 Angular 中引入 HttpClientModule。HttpClientModule 是在 Angular 4.3+ 版本中引入的，它提供了 Angular 中的 HTTP 请求客户端。要使用 HttpClientModule，请在应用程序的 AppModule 模块中进行引入：
-- -------------------- ---- ------- ------ - ---------------- - ---- ----------------------- ----------- -------- - ---------------- -- --- -- ------ ----- --------- - --- -
引入 HttpClientModule 模块后，可以在服务中进行 HTTP 请求：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- -------------- -
------------------- ----- ----------- --
---------------- -
------ ------------------------------------------------------------
-
----------------- -
----- ---- - - ------ ------ ----- ------ ------- - --
------ ------------------------------------------------------------ ------
-
-在代码示例中，我们通过 HttpClient 的 get 方法来获取返回值，并使用 post 方法发送数据。这里我们使用 jsonplaceholder.typicode.com 来模拟 HTTP 请求。
处理错误
在发送 HTTP 请求时，通常需要处理请求错误。在 Angular 中，我们可以使用 ErrorInterceptor 来拦截错误并对其进行统一处理。在示例代码中，我们为每个 HTTP 请求设置了一个错误处理方法：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- ------------ ---------------- ------------ ------------- ----------------- - ---- -----------------------
------ - ----------- ---------- - ---- -------
------ - ---- ---------- - ---- -----------------
-------------
------ ----- ---------------- ---------- --------------- -
------------- --
------------------ ----------------- ----- ------------- -------------------------- -
------ --------------------------
------------------ ------------------ -- -
-- ------------- --- ---- -
-- ---
- ---- -- ------------- --- ---- -
-- ------
- ---- -- ------------- --- ---- -
-- --------
- ---- -
-- ----
-- ---- ------------- ------
-
------ ------------------
--
--
-
-在这个拦截器中，我们使用了 catchError 操作符来捕获错误，并将其返回一个 RxJS 可观察对象。我们可以为 HTTP 错误定义自己的行为，例如：显示错误消息、显示错误页面等。
显示加载状态
在 UI 中显示加载状态是一项常见的需求。Angular 中，我们可以使用 LoadingInterceptor 拦截器来管理每个 HTTP 请求的加载状态。例如：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- ------------ ---------------- ------------ ------------- ----------------- - ---- -----------------------
------ - ---------- - ---- -------
------ - -------- - ---- -----------------
-------------
------ ----- ------------------ ---------- --------------- -
------- --------- ------------------ - ---
------------- --
------------------ ----------------- ----- ------------- -------------------------- -
----------------------------
------ --------------------------
----------- -- -
----- ----- - -------------------------------
-- ------ --- --- -
--------------------------- ---
-
--
--
-
------------ ------- -
------ -------------------- - --
-
-在这个拦截器中，我们使用了 finalize 操作符。finalize 它会在 observable 完成的时候执行，即在本例中，当 HTTP 请求被处理并且响应已接收时。我们利用 requests 数组来跟踪应用程序中的所有请求。在 isLoading 方法中，我们只需检查是否有等待的请求即可。
总结
在这篇文章中，我们学习了管理 Angular 中的 HTTP 请求可以使用 HTTPInterceptors 和 RxJS。这些技术可帮助我们更好地处理 HTTP 请求的错误、显示加载状态，并使代码更加整洁且易于维护。在您的应用中使用上述技术，可以让您更好地处理网络请求并向用户提供最佳的用户体验。
示例代码
示例代码可以在以下链接中找到：Angular HTTPInterceptors 示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b7f4948841e98948462bb