简介
angularx-headers 是一个基于 Angular 2+ 的 HTTP 请求处理器，它可以帮助你在向后端发送请求时自动添加请求头信息，使得请求更加完整、准确和安全。
使用 angularx-headers 可以简化代码，提高开发效率，并且能够在后端的安全验证中发挥重要的作用。
在本篇文章中，我们将详细介绍如何使用 npm 安装 angularx-headers，并且演示如何在 Angular 2+ 项目中使用该工具进行 HTTP 请求处理。
安装和配置
首先，我们需要在项目中安装 angularx-headers。你可以使用 npm 命令进行安装：
npm install angularx-headers --save
接着，在 app.module.ts 中引入 HttpClientModule，并将 HeadersInterceptor 设置为 HTTP_INTERCEPTORS 中的 interceptors 之一：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------------ - ---- -------------------
-----------
-------- -
--------------
----------------
--
---------- -
-
-------- ------------------
--------- -------------------
------ ----
-
--
---------- --------------
--
------ ----- --------- - -这样就完成了 angularx-headers 的基本配置，我们可以开始使用它了。
使用方法
下面，我们以一个请求 GitHub API 的案例来演示 angularx-headers 的使用方法。
首先，我们需要定义一个 Service 来处理 HTTP 请求：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ------------- -
------------------- ----- ----------- - -
------ ----------- --------------- -
------ ----------------------------------------------
-
-在 getUsers 方法中，我们使用 this.http.get 发送一个 GET 请求，并且将 https://api.github.com/users 作为请求的地址。
接着，我们需要在 HeadersInterceptor 中添加请求头信息，以便后端服务器能够正确处理请求。我们可以使用 setHeaders 方法来添加请求头信息：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
------ - ----------- - ---- ----------------- -- --------- ----------- -------
-------------
------ ----- ------------------ ---------- --------------- -
------------------- ------------ ------------ - -
------------------ ----------------- ----- ------------ -
-- ---------- ------------- -------
----- ------- - -
--------------- -------------------
--------- -------------------
---------------- ------- -------------------------------
--
-- ------------
----- ------------- - ---------------
----------- -------
---
------ ---------------------------
-
-在 HeadersInterceptor 中，我们首先从 AuthService 中获取用户认证 Token，然后将 Token 添加到 Authorization 请求头中。
接着，使用 clonedRequest.clone 方法克隆原始请求并设置请求头信息，并使用 next.handle 方法处理新的请求。
最后，我们可以在组件中调用 GithubService 获取用户信息。在组件中，我们需要使用 ngOnInit 方法来订阅 getUsers 方法返回的数据：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------ ------
------------------- -------------- -------------- - -
---------- -
----------------------------------------
---- -- -
---------- - -----
--
----- -- -
-------------------
-
--
-
-在 ngOnInit 中，我们使用 this.githubService.getUsers().subscribe 方法来订阅 getUsers 方法的返回数据，并且将数据赋值给组件的 users 属性，以在模板中显示用户信息。
总结
通过本篇文章的学习，我们了解了如何安装和使用 npm 包 angularx-headers，并且在 Angular 2+ 项目中实现了自动添加请求头信息的 HTTP 请求处理流程。
使用 angularx-headers 可以大大简化我们的代码，提高开发效率，并且能够后端安全验证中发挥重要的作用。如果你以后要开发基于 Angular 2+ 的前端项目，建议使用 angularx-headers 来处理 HTTP 请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c2681e8991b448ebb84