介绍
在前端开发中，我们常常需要获取 API 返回的 JSON 数据并将其渲染到页面上。但是，在使用 AJAX 或其他库获取数据时，往往需要手动解析数据才能将其渲染成视图。这时，一个 JSON API 解析工具便应运而生，它可以使数据转化成方便 React 或 Vue 等框架直接使用的对象。
json-api-rehydrate 是一个 JSON API 格式解析器，用于递归解析 JSON API 格式的文本响应。它可以将类似于以下格式的 JSON 数据转化成易于使用的对象：
-- -------------------- ---- -------
-
------- -
-
------- -----------
----- ----
------------- -
-------- ----- -- ---- ------
------- ----- --- -- - ------------- --- -------- ---- -- -------
--
---------------- -
--------- -
------- -
------- ---------
----- ---
-
--
----------- -
------- -
-------- ----------- ----- -----
-------- ----------- ----- -----
-
-
-
-
--
----------- -
-
------- ---------
----- ----
------------- -
------- ------
-
--
-
------- -----------
----- ----
------------- -
------- --------
--
---------------- -
--------- -------- -------- --------- ----- -----
-
--
-
------- -----------
----- -----
------------- -
------- -- ---- --- -------
--
---------------- -
--------- -------- -------- --------- ----- -----
-
-
-
-经过解析之后，上述 JSON 数据将被转化成以下对象：
-- -------------------- ---- -------
-
-
----- ----
------- -----------
-------- ----- -- ---- ------
------- ----- --- -- - ------------- --- -------- ---- -- -------
--------- -
----- ----
------- -----
--
----------- -
-
----- ----
------- ---------
--------- -
----- ----
------- -----
-
--
-
----- -----
------- -- ---- --- --------
--------- -
----- ----
------- -------- -------
-
-
-
-
-安装
你可以使用 npm 将 json-api-rehydrate 安装到你的项目中：
npm install json-api-rehydrate
或者，你可以使用 yarn 安装：
yarn add json-api-rehydrate
使用
json-api-rehydrate 的使用非常简单。你只需要将你从服务器端获取到的 JSON API 文本响应作为参数传递给它即可。在使用之前，请确保你已经了解了 JSON API 的基本概念与规范。
将 JSON API 格式数据转化成 JavaScript 对象
import parse from 'json-api-rehydrate';
const response = await fetch('/articles');
const jsonApiText = await response.text();
const data = parse(jsonApiText);
console.log(data); // 解析后的对象给 json-api-rehydrate 带上映射关系
当你使用 JSON API 编写 Web 应用时，你有可能需要对服务器端返回的数据做某些修改或扩展。此时，你可以使用 hydrate 函数，给对象添加映射关系。
-- -------------------- ---- -------
------ - ------- - ---- ---------------------
----- -------- - ----- -------------------
----- ----------- - ----- ----------------
----- ------- - -
--------- -
---- -
----------- -----
--
--
--
----- ---- - --------------------------- ---------
------------------ -- --------示例
以下为使用 json-api-rehydrate 的示例代码：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ - -------- ----- - ---- ---------------------
-------- ------------- -
----- ---------- ------------ - -------------
----- --------- ----------- - -------------
------------ -- -
----- -------- ----------- -
----- -------- - ----- -------------------
----- ----------- - ----- ----------------
----- ---- - --------------------------- ---------
------------------
-
------------
-- ----
-------- ------------------------- -
------------
-----------
--------- -
--------------------
------------ -
----------- -----------------------------------------
--
--
---
-
------ -
-----
----------------------- -- -
---- -----------------
------------------------
---------------------
------- ----------- -- ----------------------------
----------------------------------------- - ---- - -----
---------
------
---
------
--
-
------ ------- ------------这个组件会获取 /articles 中的 JSON API 格式数据，解析并映射数组中的每个元素成为一个对象，渲染成视图。同时，当点击每一篇文章的“收藏”按钮时，这个组件会在 mapping 对象中记录下这篇文章的收藏状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e7781e8991b448dbd2f