介绍
hyhc-data-status 是一个能让前端开发者更方便的设置数据状态（如加载中、成功、失败等）的 npm 包，并且能提供统一的状态管理逻辑，适用于各类前端开发场景。
安装
使用 npm 安装 hyhc-data-status：
npm install hyhc-data-status --save
或者使用 yarn 安装：
yarn add hyhc-data-status
使用
初始化
在项目顶层，例如入口文件 index.js 中进行初始化即可。
import { DataStatus } from 'hyhc-data-status';
const dataStatus = new DataStatus();设置初始状态
在使用前需要先设置初始状态，例如初始状态为加载中。
const initialStatus = {
isLoading: true,
isError: false,
isSuccess: false
};
dataStatus.setDataStatus(initialStatus);更新状态
在项目中需要改变数据状态的地方，使用 updateDataStatus 方法更新数据状态。
成功
dataStatus.updateDataStatus({
isLoading: false,
isError: false,
isSuccess: true,
data: responseData
});失败
dataStatus.updateDataStatus({
isLoading: false,
isError: true,
isSuccess: false,
error: error
});监听状态
可以在需要监听状态的地方，例如组件中通过监听状态来展示不同的 UI，使用 on 方法来监听状态变化。
-- -------------------- ---- -------
----------------------------- -------- -------- -
-- ------------------ -
-----------------------------
- ---- -- ---------------- -
----------------------------
- ---- -- ------------------ -
------------------
-
---示例
以下是一个使用 hyhc-data-status 的示例：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
----- ---------- - --- -------------
-- ----------
-------------------------- ---------- ---- ---
-- ----
------------------
-------------- ---------- -
-- ------------
-----------------------------
---------- -----
---------- ------
----- -------------
---
--
--------------- ------- -
-- --------------
-----------------------------
-------- -----
---------- ------
------ -----
---
---
-- ------
----------------------------- -------- -------- -
-- ------------------ -
-----------------------------
- ---- -- ---------------- -
----------------------------
- ---- -- ------------------ -
------------------
-
---结语
hyhc-data-status 提供了一套统一的数据状态管理逻辑，帮助开发者更方便地将状态管理进入项目开发中。在大型项目中使用起来将更为方便和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005602f81e8991b448de600