在 Angular2/4/5 中，我们经常需要发起 HTTP 请求来获取数据或与后端 API 进行交互。但如果我们在每个组件中都单独处理 HTTP 请求的话，会产生很多重复代码，如果需要更改请求处理的逻辑，也会非常麻烦。因此，我们可以在 Angular 项目中对 HTTP 请求进行全局处理，以便使代码更加简洁和易于维护。
使用 Angular HTTP 模块
首先，我们需要导入 @angular/http 模块，该模块提供了 Http 和 Response 类的实现。在 app.module.ts 文件中添加以下代码：
-- ------------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------- - ---- ---------------- -- -- ---- -- ------ - ------------ - ---- ------------------ ----------- -------- --------------- ------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- --
创建服务
我们可以创建一个服务来处理 HTTP 请求，以便在各个组件中共享请求处理逻辑。在 app 目录下创建一个新的文件夹 services，并在其中创建一个新的服务文件 http.service.ts，并添加以下代码：
-- ---------------
------ - ---------- - ---- ----------------
------ - ----- -------- -------- - ---- ----------------
------ - ---------- - ---- ------------------
-------------
------ ----- ----------- -
------- -------- ------- - --- ---------
--------------- ------------------
---
------------------- ----- ----- --
-- --- ----
-------- -------- --------------- -
------ ---------
--------- - -------- ------------ --
---------- --------- -- -----------
-------------------------
-
-- ---- ----
--------- ------- ----- ----- --------------- -
------ ---------
---------- --------------------- - -------- ------------ --
---------- --------- -- -----------
-------------------------
-
-- ------
------- ------------------ ----- --------------- -
---------------------
------ ---------------------- -- ------- --------
-
-在上述代码中，我们定义了一个 HttpService 的服务类，并实现了 get 和 post 方法来处理 HTTP 请求。在构造函数中，我们注入了 Http 对象，以便能够发起 HTTP 请求。我们也为请求设置了一个默认的请求头，在请求失败时调用 handleError 方法处理错误信息。
在组件中使用服务
现在我们已经创建了一个可用于处理 HTTP 请求的服务。我们可以通过在组件中注入该服务来访问处理请求的方法。在组件中，我们需要声明 HttpService 依赖项，并初始化它。在组件的构造函数中添加以下代码：
-- ----------------
------ - --------- - ---- ----------------
------ - ----------- - ---- --------------------------
------------
--------- ---------
------------ ----------------------
--
------ ----- ------------ -
------- ----------- - ---------------------------------------------
------------------- ------------ ------------ --
---------- -
-------------------------------------------------
---- -- ------------------
----- -- --------------------
--
-
-在上述代码中，我们在组件的构造函数中注入了 HttpService 依赖，并在 ngOnInit 生命周期方法中调用了 httpService.get() 方法来获取数据。这里我们的请求地址是 https://jsonplaceholder.typicode.com/posts 。当请求成功时，我们将数据打印到控制台上，当请求失败时，我们会打印错误信息到控制台上。
全局错误处理
在应用程序中，我们需要对请求可能出现的错误进行处理，比如网络连接不良、跨域问题、或者请求地址错误等。在 HttpService 中，我们已经实现了错误处理的方法 handleError()，但是如果我们在每个组件中都单独处理错误的话，仍然会产生很多代码。因此，我们可以使用 Angular 提供的 ErrorHandler 类来全局处理错误。
在 app.module.ts 文件中，我们可以通过提供全局 ErrorHandler 来处理HTTP请求错误。在 providers 数组中添加以下代码：
------ - ----------- ------------ - ---- ----------------
-------------
------ ----- ------------------ ---------- ------------ -
------------------ ---- -
----------------- ----- ----------- -------
-
-
-----------
-------- --------------- ------------
------------- ---------------
---------- ---------------
---------- -
------------
-
-------- -------------
--------- ------------------
-
-
--
------ ----- --------- --在上述代码中，我们定义了 GlobalErrorHandler 类来实现 ErrorHandler 接口，并提供了 handleError() 方法来处理错误信息。在 providers 数组中，我们添加了 HttpService 并提供了一个全局的 ErrorHandler。这样，当应用程序中的任何请求出错时，错误信息都将被全局错误处理程序处理。
结论
在本文中，我们已经介绍了如何在 Angular2/4/5 中使用全局的 HTTP 请求处理程序来减少重复代码，这样我们就可以在应用程序中共享请求逻辑。我们使用了 @angular/http 模块来发起 HTTP 请求，并使用 HttpService 服务类来处理请求和响应。我们还定义了 GlobalErrorHandler 类来全局处理请求错误，并在 app.module.ts 中提供它。这样一来，我们就可以让我们的代码变得更加简洁、易于维护和优雅。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6720c0712e7021665e03e363