介绍
@n3/ng-api-group 是一个 Angular 的 npm 包，用于将 API 请求分组并进行统一管理。它可以帮助我们更好地组织和管理 API 请求，提高代码的可维护性和可读性。
安装
使用 npm 安装：
npm install @n3/ng-api-group --save
使用
1. 导入模块
在需要使用 @n3/ng-api-group 的模块中导入 ApiGroupModule：
import { ApiGroupModule } from '@n3/ng-api-group';
@NgModule({
imports: [ApiGroupModule],
// ...
})
export class YourModule {}2. 创建 API 分组
创建一个 API 分组，可以使用 ApiGroupService：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - --------------- - ---- ------------------- ------------- ----------- ------ -- ------ ----- ---------- - ------------------- ---------------- ---------------- -- ----- - --------------------------------------------- -- ------ ------- --- ----- - --------------------------------------------- -- ------ ------- --- -
3. 添加 API 请求
向分组中添加 API 请求，可以使用 ApiGroup 对象的 add 方法：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - --------------- - ---- -------------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ---------- -
------------------- ---------------- ---------------- ------- ----- ----------- --
----- - ---------------------------------------------
----- - ---------------------------------------------
------------------------------------ ------- --------- -------- --------------- -
------ ----------------- -- ---------------------------- - --------- -------- ----
-
----------- --------------- -
------ ----------------- -- -----------------------------
-
-add 方法接受一个函数参数，该函数应返回一个 Observable 对象。 add 方法将返回一个被包装后的 Observable 对象。
4. 执行 API 请求
在组件中使用 ApiGroup 的 invoke 方法执行 API 请求：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
--------- -
------- -----------------------------
------- ------------------------------------
-
--
------ ----- ------------ -
------------------- ----------- ----------- --
------- -
--------------------------------------------------- ---------------------------- -- -
----------------------
---
-
---------- -
--------------------------------------------- -- -
----------------------
---
-
-invoke 方法会自动调用 add 方法传入的函数，并返回一个被包装后的 Observable 对象。在组件中订阅该对象即可执行 API 请求。
5. 监听请求状态变化
使用 ApiGroup 对象的 isLoading 属性可以监听请求状态：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
--------- -
---- ---------------------------------------
-------
------
------- -----------------------------
---- ---------------------------------------
-----------
------
------- ------------------------------------
-
--
------ ----- ------------ -
------------------- ----------- ----------- --
------- -
--------------------------------------------------- ---------------------------- -- -
----------------------
---
-
---------- -
--------------------------------------------- -- -
----------------------
---
-
-isLoading 属性返回一个 BehaviorSubject<boolean> 对象，当请求开始时自动设置为 true，请求结束时自动设置为 false。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - --------------- - ---- -------------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ---------- -
------------------- ---------------- ---------------- ------- ----- ----------- --
----- - ---------------------------------------------
----- - ---------------------------------------------
------------------------------------ ------- --------- -------- --------------- -
------ ----------------- -- ---------------------------- - --------- -------- ----
-
----------- --------------- -
------ ----------------- -- -----------------------------
-
-
------------
--------- -----------
--------- -
---- ---------------------------------------
-------
------
------- -----------------------------
---- ---------------------------------------
-----------
------
------- ------------------------------------
-
--
------ ----- ------------ -
------------------- ----------- ----------- --
------- -
--------------------------------------------------- ---------------------------- -- -
----------------------
---
-
---------- -
--------------------------------------------- -- -
----------------------
---
-
-以上是 @n3/ng-api-group 的使用教程，可以帮助我们更好地管理和组织 API 请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24482f