在前端开发中，RxJS 是一个非常重要的工具库，用于实现复杂的异步数据流处理。而 rxjs-marbles 是一个非常有用的 npm 包，它可以将 RxJS 的数据流转换成具有赛事跑道效果的图表，以便于我们更加直观地理解和调试程序。
下面我们就来介绍一下，如何使用 rxjs-marbles。
安装 rxjs-marbles
作为一个 npm 包，我们需要通过命令行来安装 rxjs-marbles，命令如下：
npm install --save-dev rxjs-marbles
安装成功以后，我们就可以在项目中引入该模块了。
使用 rxjs-marbles
在 RxJS 中，我们经常会使用 Observable 来处理异步数据流，而 rxjs-marbles 可以用来可视化这些数据流的处理过程。数据流图表使用了具有赛事跑道效果的语法，让我们能够更加直观地理解数据流的处理过程。
接下来，我们将介绍如何使用 rxjs-marbles，以创建数据流图表来可视化处理过程。
1. 创建 RxJS Observable
我们从创建一个 RxJS 的 Observable 开始。下面是一个示例 Observable：
const source = of(1, 2, 3);
这个 Observable 会产生一个数据流，它会先发出 1，然后是 2，最后是 3。
2. 为 Observable 创建 “发射石头”
创建发射石头是 rxjs-marbles 最重要的一步。它用于模拟数据流的推送和时间轴。让我们在示例代码中添加一个 “发射石头” 来创建数据流的图表：
-- -------------------- ---- -------
------ - ------- - ---- ---------------
------ - -- - ---- -------
---------- ---------- ------ ---------- ----------- -- -
-- ------ --- ------ ----------
----- ------ - ----- -- ---
-- ------ --- -------- ------ -- --- ------ ----------
----- -------- - ---------------- - -- -- -- -- -- - ---
-- ------ --- ------ -- ----- --- -------- ------
------------------------------------------
----这里我们引入了 marbles 函数，它会将我们的测试函数转换为一个可输出数据流图表的函数。
在我们的示例代码中，我们在m.cold函数中向源 Observable 发送了3个数据，即 1、2、3。 然后，我们使用字符串来表示数据流图表，并在最后一个管道符号 ”|” 之前添加了类型标识符。这个标识符告诉 RxJS 该数据流什么时候完成。注意这里的 “a”、“b”、“c” 只是自定义的标识符，你可以使用你自己想要的标识符。
3. 运行测试
现在我们已经创建了数据流图表，我们需要运行测试来查看数据流图表的输出结果。如果代码正常运行，我们将会看到一个数据流的图表。
4. 调试我们的数据流
如果我们的测试失败，rxjs-marbles 还可以帮助我们调试数据流的处理。在实际工作中，我们可能会面对一些复杂的数据流，导致难以追踪问题。使用 rxjs-marbles，我们可以通过图表和错误消息更快地定位错误点，并更好地理解数据流驱动的程序设计。
5. 为数据流图表添加更多的操作符
到目前为止，我们只添加了一个简单的 Observable 。但是， RxJS 中有很多其他的操作符，我们可以组合使用来完成更复杂的任务。让我们来看一个更复杂的例子：
-- -------------------- ---- -------
------ - ------- - ---- ---------------
------ - ------- --- ---------- - ---- -------
---------- ---------- --------- ------------- ----------- -- -
-- ------ --- ------ -----------
----- ------- - --------------- - -- -- -- - ---
----- ------- - ---------------- - -- -- -- -- -- - ---
-- ------ --- -------- ------ -- --- -------- -----------
----- -------- - ------------------- - -- -- -- -- -- -- -- -- -- -- -- - ---
-- ------- --- -----------
----- ------ - --------------- --------------
-- --- --- ---- ------- -- --- --------- ----------
----- -- - - ---
-- ----- -- ----- -- --- --------- ---------- -------- -- --- -------
----- -- - - - --- - -- ---------------------- --- ------ --------
--
-- ------ --- --------- ---------- -- ----- --- -------- ------
------------------------------------------
----在这个例子中，我们定义了两个源 Observable（使用 m.cold 函数），将它们连接起来，使用 map 操作符添加一个额外的元素，使用 tap 操作符对结果进行检查， 如果结果包含奇数，就抛出一个错误（使用 throwError）。
最终，我们使用 m.expect 函数来测试结果，检查是否满足了预期的输出。
总结
rxjs-marbles 使得我们可以更方便地理解和可视化 RxJS 中的数据流，从而能够更快地测试和调试应用程序。希望上面的例子可以帮助大家更容易地开始使用 rxjs-marbles。
除了上面的例子外，rxjs-marbles 还支持很多其他的操作符，如果您想详细了解它，请参阅 rxjs-marbles 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/rxjs-marbles