前言
在 Angular 应用程序开发过程中，我们经常需要通过 HTTP 请求调用后端 API 来获取数据。使用 @angular/common/http 已经可以满足大部分需求，但有时候我们需要对请求进行一些自定义的操作，例如在请求头中添加 token，对返回数据进行包装等等。这时候就需要自定义一个 http 服务，频繁地重复这些操作显然不是最优方案。在这种情况下，我们可以使用 npm 包 @n3/ng-api-common 来简化我们的开发。
安装
@n3/ng-api-common 是一个 npm 包，可以通过如下命令安装：
npm install @n3/ng-api-common --save
使用
@n3/ng-api-common 提供了一个 NgApiCommonService 类来简化 http 请求的操作。以下是一个简单的示例：
- 首先需要在 app.module.ts 中导入 HttpClientModule。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ------------------ ---------- --- ---------- --------------- -- ------ ----- --------- --
- 在组件中注入 NgApiCommonService。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------ - ---- -------------------- ------------ --------- ----------- --------- --- ------- - ----- ---- -- ------ ----- ------------ - ------- - ------------------------------------------ ------------------- ----------------- ------------------- -- -
apiCommonService.get('/api/message') 就是一个简单的 GET 请求。当我们订阅 message 时，调用了 NgApiCommonService 类中的 request 方法，该方法中使用了 Angular HttpClient 进行请求，返回了一个 Observable 对象，我们可以 pipe 一些操作符操作 Observable 对象。
- 自定义请求
如果有一些自定义需求，例如在请求头中添加 token 等等，我们可以使用 NgApiCommonService 中提供的 options 参数：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- ------------------- - ---- --------------------
------------
--------- -----------
--------- --- ------- - ----- ----
--
------ ----- ------------ -
--------------- ------------------- - -
-------- -
-------------- ------- ---------------
--
--
------- - ----------------------------------------- ---------------------
------------------- ----------------- ------------------- --
-以上代码中，我们在 headers 中添加了一个 Authorization 字段，并在值中添加了一个 token。
- 对返回数据进行包装
对于一些通用的操作，例如对返回数据进行一些统一的包装、错误处理等等，我们可以自定义一个 http 服务并继承 NgApiCommonService，并在其中添加自己的逻辑。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------------- ------------------- - ---- --------------------
------ - ----------- ---------- - ---- -------
------ - ----------- --- - ---- -----------------
-------------
----------- -------
--
------ ----- ---------- ------- ------------------ -
--------------- ------------------- - -
-------- -
-------------- ------- ---------------
--
--
------------- -
--------
-
------ ------------ ------- --------- --------------------- ------------- -
------ ------------------ --------------
--------- ---- -- -
-- --------------- --- ---- -- ----------- -- ----- -
------ ------------
- ---- -
--------------------- --------------------
------ ---------------------------
-
---
------------------ ---- -- -
--------------------- ----------------------
------ -----------------------------
--
--
-
-这个示例中我们重写了 NgApiCommonService 中的 get 方法并做了如下操作：
- 判断返回的数据是否为成功，成功则返回 data 字段中的值，否则抛出错误。
- catchError 中处理请求错误。
总结
@n3/ng-api-common 提供了一种很简便的方式来对 http 请求进行自定义操作。除此之外，自定义 http 服务也是一个不错的方案，可以将一些通用的操作进行封装。期望本篇文章能帮助大家理解和使用 @n3/ng-api-common 这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a40