简介
wisper.service 是一个专门用于前端业务层面的状态管理库，它基于 Flux 的思想，但提供了更加符合实际业务场景的 API，让你可以更加方便地管理你的业务状态。
安装
使用 npm 进行安装：
npm install wisper.service --save
简单示例
我们来看一个简单的示例，展示 wisper.service 的基本使用方式。
-- -------------------- ---- -------
------ - ------- - ---- -----------------
----- ------- - --- ---------
------ -
------ --
--
-------- -
----------- ----- -- -
--------------
--
--
---
-- ------
------------------------- ---------- -- -
---------------- -------- ----------
---
-- -- ------
------------------------------ -- --------- - ------ - -这个示例中，我们首先创建了一个包含一个 count 属性的初始状态。然后定义了一个 increment 的 action，用于将 count 加一。接着，我们创建了一个 Service 实例，并将初始状态和 actions 传入。最后，我们通过 dispatch 方法调用了 increment action，更新了状态，并在状态变更时打印出了新的状态。
更加复杂的示例
上面我们看到了一个简单的示例。但实际业务中，我们经常需要处理更加复杂的场景。比如我们需要通过一个接口获取数据，然后将数据存储到状态当中。我们可以使用 wisper.service 中提供的异步 action 来处理这类场景。
-- -------------------- ---- -------
------ - ------- - ---- -----------------
------ ----- ---- --------
----- ------- - --- ---------
------ -
-------- ------
----- -----
------ -----
--
-------- -
----- ----------- ----- -- -
------------- - -----
--- -
----- --- - ----- -----------------------
---------- - ---------
- ----- ----- -
----------- - ------------
-
------------- - ------
--
--
---
-- ------
------------------------- ---------- -- -
---------------- -------- ----------
---
-- -- ------
------------------------------这个示例中，我们定义了一个 fetchData 的异步 action，它会先将 loading 状态置为 true，然后发起一个异步请求获取数据。如果请求成功，将数据存储到状态当中，如果请求失败，将错误信息存储到状态当中。最后将 loading 状态置为 false。
与前面的示例类似，我们仍然是先创建了一个 Service 实例并传入状态和 actions，然后通过 dispatch 方法调用 fetchData action，触发状态更新。这个示例中，我们使用了 axios 发起了一个异步请求，这个只是示例中的一个方法，你可以根据实际情况使用其他库或自己实现异步请求逻辑。
总结
在本文中，我们介绍了 npm 包 wisper.service 的使用方法，包括状态的创建、action 的定义和调用，以及对状态变化的监听。并通过两个示例展示了如何处理简单和复杂的业务场景。这个库非常适合在前端业务开发中使用，并且有良好的可扩展性，你可以根据自己的需求对它进行定制化开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671118dd3466f61ffe3f2