在前端开发中，我们经常会使用到 HTTP 请求来获取数据。在 Angular2 中，HTTP 请求是一个非常常见的功能。但是，在实际开发中，我们不可能一直在每个组件中都写一遍 HTTP 请求，这样会导致代码的冗余，降低代码的可读性和可维护性。因此，我们需要对 HTTP 请求进行封装与拦截。
HTTP 请求的封装
首先，我们需要将 HTTP 请求封装到一个可复用的服务中。下面是一个简单的 HTTP 请求服务的实现：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----- -------- - ---- ----------------
------ - ---------- - ---- ------------------
------ ------------------------
------ --------------------------
-------------
------ ----- ----------- -
------------------- ----- ----- --
-------- -------- -------------------- -
------ ---------
---------
------------- -- ----------------
-------------------------
-
--------- ------- ----- ----- -------------------- -
------ ------------------- ------------------------------
-
------- ------------------ ----- --------------- -
---------------------
------ ----------------------------------- -- ------- --------
-
-上面的代码定义了一个 HttpService 服务，它包含了两个常用的 HTTP 请求方法：get 和 post。其中，get 方法用于发送 GET 请求，post 方法用于发送 POST 请求。这个服务还引入了 RxJS 库，用于处理异步数据流，实现了一个错误处理函数 handleError，在请求发生错误时，我们会把错误信息输出到控制台，并返回一个错误的 Observable 对象。
此外，在这个服务中，我们还使用了注解 @Injectable()，声明这个服务可以被注入到其他组件中。通过这个服务的封装，我们可以在组件中直接调用这个服务的方法，获取数据，例如：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------ - ---------------------------------------
------------------- ------------ ------------ --
---------- -
------------------------------------------------ -- -------------------
-
-在组件中，我们通过构造函数注入了 HttpService 服务。然后，在 ngOnInit 生命周期钩子中，我们调用了 HttpService 服务的 get 方法，获取到了 GitHub 上名叫 Octocat 的用户的信息。通过这个例子，我们看到，服务的封装能够大大减少代码的重复，提高代码的可读性。
HTTP 请求的拦截
除了将 HTTP 请求封装到一个可复用的服务中外，我们还可以对 HTTP 请求进行拦截和处理。HTTP 请求拦截器是 Angular 提供的一个非常重要的功能，它可以在请求发送前或收到响应后，对请求进行处理。HTTP 请求拦截器可以用来添加一些固定的请求头或响应头、对错误进行统一处理、对请求进行缓存等。
使用 HTTP 请求拦截器，需要实现 Angular 的 HttpInterceptor 接口。下面是一个简单的 HTTP 拦截器的实现：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------
----------------
------------
-----------
- ---- -----------------------
------ - ---------- - ---- ------------------
-------------
------ ----- ---------------------- ---------- --------------- -
----------
---- -----------------
----- -----------
-- -------------------------- -
----- ------- - -----------
-------- -------------------------------- ------ -----------------
---
------ -------------------------- -- --- ----- -- -
-- ------------- --- ---- -
------------------------- -----------
-
---
-
-这个拦截器实现了 HttpInterceptor 接口中的 intercept 方法。在 intercept 方法中，他会对每个请求添加一个 Authorization 请求头。此外，我们还对请求的错误进行了处理，当请求返回 401 错误码时，我们输出一句信息到控制台。
在实际应用中，在拦截器中可能会进行更复杂的操作，例如添加请求头、响应头、缓存请求等等。在上面的例子中，我们只是展示了拦截器的最基本用法。下面是如何把拦截器加入到 Angular 应用的：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ---------------------- - ---- -----------------------------
-----------
-------- --------------- ------------------
------------- ---------------
---------- -
-
-------- ------------------
--------- -----------------------
------ ----
-
--
---------- --------------
--
------ ----- --------- --在上面的代码中，我们首先引入了 HttpClientModule 模块，然后把 HttpInterceptorService 服务作为 HTTP 拦截器提供程序提供给了 Angular 的 DI（Dependency Injection）系统。通过这个指令，我们向 Angular 提供了一个 HTTP 拦截器，这样每个 HTTP 请求都会被这个拦截器所拦截。
总结
本文介绍了在 Angular2 中如何封装和拦截 HTTP 请求。通过对 HTTP 请求进行封装，我们可以减少代码的冗余，提高代码的可读性和可维护性。而通过 HTTP 请求拦截器，则可以在请求发送、响应返回前、后进行请求的处理，使应用代码更加清晰、模块化和可控制。为了更好的应用拦截器和服务，建议在日常开发中多多实践并不断探索一些新的技术和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f81227f6b2d6eab30376db