简介
在前端开发过程中，处理和管理数据是非常重要的一项工作。而 Jsonapi 是一种规范，它定义了 HTTP API 与 JSON 数据交互方式的标准。在 Angular2+ 中，我们可以使用 @tektite/angular2-jsonapi 去处理 Jsonapi 数据，简化我们的开发过程。这个 npm 包提供了一个基于配置的 API 行为，支持现有 RESTful API，并自动处理数据格式，使其符合 JSONAPI 规范。本文将带你深入了解这个主题，并示范如何使用 @tektite/angular2-jsonapi。
准备
在开始之前，您需要一个 Angular2+ 项目，并且已经安装了 Angular CLI。如果还没有，可以使用以下命令进行安装：
npm install -g @angular/cli
接着，我们需要安装 @tektite/angular2-jsonapi：
npm install --save @tektite/angular2-jsonapi
之后，我们需要在 app.module.ts 中引入 HttpClientModule，这是一个 HTTP 客户端库，支持处理和管理 HTTP 请求和响应数据。同时也要引入 TktJsonapiModule，这是 @tektite/angular2-jsonapi 库的核心模块。最后，在 imports 数组中注册这两个模块。
-- -------------------- ---- ------- ------ - ---------------- - ---- ----------------------- ------ - ---------------- - ---- ---------------------------- ----------- --- -------- - -------------- ----------------- -------------------------- ----- -------------------------------------- -- -- --- --展开代码
配置
现在，我们需要将 @tektite/angular2-jsonapi 库与我们的后端 API 连接。如果您使用的是符合 JSONAPI 规范的 API，您可以使用 @tektite/angular2-jsonapi 的默认配置。如果您的 API 不符合 JSONAPI 规范，您需要配置 transform 函数。以下是一个简单的配置示例：
-- -------------------- ---- ------- ------ - ------------------- ---------------- - ---- ---------------------------- ----------- --- ---------- - - -------- ------------------- --------- ------------------- ----- --------------------------------------- ---------- ------ ---------- - --------- ---- -- - ----------------- -- - ------------ - ---------------- - - - - ----------------- -- - - - - -- --- --展开代码
在这个例子中，我们定义了一个 transform 对象，它包含一个 getUsers 函数。这个函数将我们的用户列表（data 参数）转换为包含名字的新列表。@tektite/angular2-jsonapi 库将每个转换函数应用于它请求到的数据。
你也可以选择提供单独资源的转换方法：
-- -------------------- ---- ------- ------ ----- ------------ ------- -------- - -------------- - ------ -------- - --------------- - ------------ - ---------------- - - - - ----------------- ------ ----- - -展开代码
在这个例子中，我们定义了一个 UserResource 类，并覆盖了 Resource 类中的 transform 方法，返回更新后的用户数据。Resource 类是 @tektite/angular2-jsonapi 库中的一个基类，所有的资源文件都需要继承。
外部 API 可能会使用单词复数而不是单数来表示资源。你可以通过声称 pluralize 为 false 来防止 @tektite/angular2-jsonapi 库自动将资源中的复数词转换为单数。不同语言有不同的单复数转换规则，为了保证同一应用中多个语言之间的表述一致，建议 API 也采用单数作为资源名字。
使用
我们已经配置好了 @tektite/angular2-jsonapi 库，现在让我们看一下如何使用它。使用 @tektite/angular2-jsonapi 库非常简单，只需要使用 HttpClient 对象获取数据，@tektite/angular2-jsonapi 库将自动将其转换为符合 JSONAPI 规范的数据格式。
以下示例展示了如何使用 @tektite/angular2-jsonapi 库从 API 获取用户。首先，创建一个 UserService，它将获取我们的数据。然后使用注入器注入 TktJsonapiService 和 HttpClient 对象。getUser() 方法从 API 获取用户的列表，并转换成 JSONAPI 标准的数据格式。最后，返回用户列表。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ----------------- - ---- ---------------------------- ------ - ---------- - ---- ----------------------- ------------------------ -------- ------ ----- ----------- - ------------------- ----- ----------- ------- -------- ------------------ -- --------- - ----- --- - ------------------------------- ------ ---------------------------- -- ------------------------------ ---------- - -展开代码
现在，在我们的组件中，我们可以注入 UserService 并使用它来获取用户列表。以下示例展示了如何使用我们刚刚创建的 UserService。
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- ----------- --------- - ---- ------------------- ---- ----------- ---- -- ------------------------- ----------------------- ------ -- ------- - - -- ------ ----- ------------- ---------- ------ - ------ ------ ------------------- ------------ ------------ - - ---------- - ------------------------------------------ -- ---------- - ------- - -展开代码
在这个例子中，我们创建了一个 UserComponent，并使用 *ngFor 指令遍历 users 数组，展示出每一个用户的名字。
结论
现在您已经了解了如何使用 @tektite/angular2-jsonapi 包。@tektite/angular2-jsonapi 并不会让您的项目更加复杂，反而会大大简化使用 Jsonapi 数据的过程。通过本文所述的文档和示例，您可以轻松地处理 Jsonapi 数据，使其符合 JSONAPI 规范。这样您可以将更多的精力集中在业务逻辑和用户体验上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de0cf
