HTTP Interceptor 是 Angular 提供的一种拦截 HTTP 请求和响应的机制。使用 Interceptor 可以全局管理 HTTP 请求，例如添加请求头、响应拦截等，这可以帮助我们更加方便地在前端中处理网络请求。
本文将介绍如何在 Angular 中使用 HTTP interceptor 来添加全局 Header。
第一步：创建 HTTP Interceptor
我们先创建一个名为 HttpInterceptor 的类，并让它实现 Angular 的 HttpInterceptor 接口。这个类将会是一个 HTTP Interceptor，可以通过 Injectable 的方式注入到我们的项目中。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- --------------- ---------- --------------- -
------------------ ----------------- ----- ------------ -
-- ------- ------
------ ---------------------
-
-第二步：添加全局 Header
下面我们在 intercept() 方法中来添加全局 Header。在 Angular 中，我们可以使用 clone() 方法来复制请求对象，并通过 setHeaders() 方法来设置请求头。示例代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- --------------- ---------- --------------- -
------------------ ----------------- ----- ------------ -
----- ----------- - ------- - - ------------------------------
----- ------- - ------------------------------------ -------------
----- ----------- - --------------- ------- ---
------ -------------------------
-
-在上面的示例代码中，我们通过 localStorage 来获取 token，并将其添加到 Authorization 请求头中。然后通过 clone() 方法复制请求对象，设置请求头后返回一个新的请求对象。
第三步：将 Interceptor 注入应用中
最后，我们需要将我们创建的 Interceptor 注册到 Angular 应用中。我们可以在根模块中通过 provide 选项将其导入并添加到 Angular 的 HTTP_INTERCEPTORS 常量中。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------- - ---- -----------------------
------ - --------------- - ---- ---------------------
-----------
---------- -
-
-------- ------------------
--------- ----------------
------ ----
-
-
--
------ ----- --------- - -通过上述步骤，我们成功地在 Angular 中使用 HTTP interceptor 来添加全局 Header。
总结
在现代的前端项目中，网络请求是必不可少的一部分。使用 HTTP interceptor 可以帮助我们更加方便地管理请求，例如添加全局 Header、响应拦截等。通过以上的学习，希望读者可以了解 HTTP interceptor 的使用方法，并能以此为基础，更好地管理网络请求。
示例代码
以下是完整的 HTTP Interceptor 示例代码，仅供参考。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- --------------- ---------- --------------- -
------------------ ----------------- ----- ------------ -
----- ----------- - ------- - - ------------------------------
----- ------- - ------------------------------------ -------------
----- ----------- - --------------- ------- ---
------ -------------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de2743f6b2d6eab3970e2e