介绍
在前端开发中，经常需要使用 API 来获取或者发送数据。虽然可以使用原生的 XMLHttpRequest 对象或者 fetch API 来实现，但是这些方法并不能很好地封装和管理多个 API。而使用 @novaris/ng-api-client 可以让我们更方便地管理和使用 API。
@novaris/ng-api-client 是一个 Angular 的 API 客户端库，它可以处理 API 的认证、请求、响应错误等问题，并且支持多个请求拦截器、响应拦截器和请求重试等功能。
下面我们将详细介绍如何使用 @novaris/ng-api-client。
安装
使用 npm 安装 @novaris/ng-api-client：
npm install @novaris/ng-api-client --save
使用
1. 导入模块
在需要使用 @novaris/ng-api-client 的模块中，我们需要先导入 HttpClientModule：
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [HttpClientModule]
})
export class AppModule { }然后再导入 HttpClientModule：
import { NgApiClientModule } from '@novaris/ng-api-client';
@NgModule({
imports: [NgApiClientModule]
})
export class AppModule { }2. 创建 API 服务
我们需要创建一个服务来管理我们的 API，例如，我们创建一个名为 userService 的服务：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- -------- - ---- -------------------------
------ - ---------- - ---- ------------------
------ - ---------- - ---- -----------------
-------------
----------- ------
--
------ ----- ----------- -
------- ---------- ----------
------------- -
-------------- - --- -----------
-------- --------------------------
-------- -
--------------- ------------------
--
---------------- ----
---
-
------ ----------- --------------- -
------ ----------------------------------
------------------ --------- -- -
------ ------------------------
--
--
-
-在这里，我们创建了一个名为 apiClient 的 ApiClient 对象，并且设置了 API 的基本 URL、请求头和处理跨域请求的选项。其中，baseUrl 是必须的，其他选项都是可选的。
然后，我们定义了一个名为 getUsers 的方法来获取用户列表。它使用 apiClient 的 get 方法来发起一个 GET 请求，并通过 catchError 操作符来处理网络错误。
3. 在组件中使用
我们可以在组件中注入 userService 服务并使用它来获取用户列表：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ----------------
--------- -
----
--- ----------- ---- -- -------
-- --------- --
-----
-----
-
--
------ ----- ----------------- -
------ ------ ----- - ---
------------
------- ------------ -----------
- -
-----------------
-
------- ------------ ---- -
--------------------------------------------- ------ -- -
---------- - ------
---
-
-在这里，我们在组件的构造函数中注入了 userService，并且在组件的 loadUsers 方法中使用它来获取用户列表，并将结果存储在组件的 users 属性中供模板使用。
示例代码
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- -------- - ---- -------------------------
------ - ---------- - ---- ------------------
------ - ---------- - ---- -----------------
-------------
----------- ------
--
------ ----- ----------- -
------- ---------- ----------
------------- -
-------------- - --- -----------
-------- --------------------------
-------- -
--------------- ------------------
--
---------------- ----
---
-
------ ----------- --------------- -
------ ----------------------------------
------------------ --------- -- -
------ ------------------------
--
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e08