observ-thunk 是一个基于 observ 的状态管理工具，它允许你将异步请求嵌入状态管理中。
本文将详细介绍如何使用 observ-thunk，包含了示例代码和深入探讨，帮助你最大化利用 observ-thunk。
安装
你可以通过 npm 来安装 observ-thunk。
--- ------- ------------
基础使用
使用 observ-thunk，你需要首先创建一个 observable 对象。
----- ------ - ----------------- ----- ----- - ----------
然后定义一些 action，这些 action 可以更新我们的状态。因为状态中可能涉及异步操作，因此我们使用 thunk 来包装 action。
----- ----- - -----------------------
----- --------------- - ------- ----- -- -
--------------- - ----
-
----- -------------- - ------- -- -
------ ---- -- -
------------- -- -
-------- - -- -- -- - --
-- ----
-
-
----- -------------- - ------- -- -
------ ---------- -- -
---------------------- - -- - --
--------------------------- ----- -- -
---------------------- -----
------- -----
--
--
-上述代码中，我们定义了三个 action。updateSomething 用于更新 state 直接属性的值，fetchSomething 将数据异步获取到，并将得到数据更新到 state 上。updateAndFetch 是我们包含了异步 action 的 action。这里我们用到了 thunk 函数，也就是将异步 action 包装成一个 thunk 函数，使得我们可以将这个函数存储在 state 中。
我们现在可以使用这些 action 来更新我们的状态：
---------------------- - -- - -- -- -------- --------------- --- - -- - - --------------------- -- ------------
我们也可以将状态的更新绑定到一个 observable 对象上，来实时监听它的变化。
----- ------- - ------------------------- -------------- --- -- - -------------- --
进一步探索
observ-thunk 的真正威力在于，它允许我们在一个异步请求完成后再发起下一个异步请求。这时我们需要用到一个重要的东西：thunk 嵌套。
在上一个示例中，我们已经看到了 updateAndFetch 函数可以完成一个异步请求。现在我们尝试给它们加上第二个异步请求。
----- --------- - ------- -- -
------ ---- -- -
------------- -- -
-------- --- -- ---
-- ----
-
-
----- ------------------- - ------- -- -
------ ---------- -- -
---------------------- - -- - --
--------------------------- ----- -- -
---------------------- -----
--------------------------- ----- -- -
---------------------- - -- - --
---------------------- ----- -- -
---------------------- - -- ---- --
------- -----
--
--
--
--
-上述代码中，我们新加了 fetchData 函数来获取一个数组。我们接着在 updateFetchAndFetch 中嵌套了一个异步 thunk。每个 thunk 在完成之后都会触发回调函数，这里使用了 NodeJS 的回调风格。
总结
使用 observ-thunk，我们可以在状态管理工具中将异步请求嵌入。可以使用 thunk 来包装异步请求，并嵌套各种前后依赖的异步请求。
记住，尽管 thunk 可以让你方便地将异步请求整合到状态管理中，但是它并不适用于所有情况。你需要根据自己的业务判断是否该使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f9d3d1de16d83a66f8f