在 Angular 中使用 Service 来封装 HTTP 请求
在进行前端开发过程中，网络请求是不可避免的一个环节。为了更好地管理我们的网络请求，我们可以使用 Angular 提供的 Service 来封装 HTTP 请求。
- 什么是 Service
在 Angular 中，Service 是一个可以注入到组件或其他 Service 中的可复用代码块。我们可以把一些通用的业务逻辑放进 Service 中，然后在组件中通过注入 Service 的方式来调用 Service 提供的方法。
- 为什么要封装 HTTP 请求
通常情况下，我们都是在组件中直接使用 HttpClient 来发起 HTTP 请求。但是，如果我们的应用中存在多个组件需要用到相同的 HTTP 请求，那么每个组件都需要重复写一遍相同的代码，这样会造成代码冗余和维护成本的提高。
通过将 HTTP 请求封装到 Service 中，不仅可以避免代码冗余和提高代码复用性，而且还能提高代码的可维护性和可测试性。
- 如何在 Service 中封装 HTTP 请求
在 Angular 中，我们可以使用 HttpClient 来进行 HTTP 请求。下面是一个使用 HttpClient 发起 GET 请求的示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ---------- -
------------------- ----- ----------- - -
---------- --------------- -
------ ---------------------------
-
-在上面的代码中，我们使用了注入的 HttpClient 对象来发送 GET 请求，并把请求的结果转化为一个 Observable 对象返回。
在封装 HTTP 请求时，我们需要注意以下几点：
- 封装的方法应该返回一个 Observable 对象，以便于在组件中进行相应的处理。
- Service 应该是可注入的，我们可以在 @Injectable 装饰器中使用 providedIn: 'root'，这样就可以在整个应用中共享这个 Service 了。
- 应该对请求的错误进行处理，以保证应用的健壮性。
- 如何在组件中使用 Service
在 Service 中封装好 HTTP 请求后，我们就可以在组件中使用 Service 了。下面是一个示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
----- ----
------------------- ----------- ----------- - -
----------- ---- -
------------------------------------
----- -- -
--------- - ----
--
----- -- -
-------------------
-
--
-
-在上面的代码中，我们通过注入 ApiService 来调用 Service 提供的方法，在 ngOnInit 生命周期钩子函数中通过 subscribe 订阅结果，并在回调函数中对结果和错误进行处理。
- 总结
通过将 HTTP 请求封装到 Service 中，我们可以提高代码的复用性、可维护性和可测试性。在实际开发中，我们应该在合适的情况下使用 Service 来封装 HTTP 请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de9faff6b2d6eab39ca361