是什么
@basic-streams/start-with 是一个基于 RxJS 的 npm 包，它提供了一个操作符，可在起始值发出前执行指定操作。如果你用到 RxJS 操作符，那么这个包一定会对你有帮助。
安装
你可以使用 npm 或者 yarn 安装这个包：
使用 npm：npm install @basic-streams/start-with
使用 yarn：yarn add @basic-streams/start-with
如何使用
这是一个简单的例子：
------ - -- - ---- ------- ------ - --------- - ---- ---------------------------- ----- ------- - ---------- --------- ------------ ------------------- -- -------------------------------
这个例子中，我们定义了 source$，它包含了三个元素，通过 startWith 方法我们在起始处添加了 "pre..."。这个方法接收一个参数，即添加到原始流的值。在不同的场合下，它有非常广泛的使用。
另外，@basic-streams/start-with 还支持 RxJS 的 Pipeable Operators 和 TypeScript。
深入理解
startWith 方法在 RxJS 中十分常见，它会在源 Observable 的请求事件之前插入一个事件。基于这个方法，我们可以实现很多有趣的功能。
比如一个简单的应用场景：从 LocalStorage 中获取数据并与服务器数据结合，得到最新的数据并呈现到用户的页面上。
------ - --------- -- - ---- -------
------ - ---------- -------------------- - ---- -----------------
----- --------------- - ------ -- ------ -- ------- ---- ---- --
----- -------------- - ------------ --
-------------------------------
----------------------
-----------------------
-
----- ------------------ - ---------- ----------
--------------------------------------- -- - -- -------- ------- -------
---------------- ------ ---- ----- ----- ------------
-------------------------------------- -- -------------------------- --------- ----
---------------- ------ ---- --- ----- ------------
---在这个例子中，我们定义了一个 interval 流，它每隔 60 秒发出一个事件。我们通过 startWith 将 serverData 插入流的最开始，并通过 distinctUntilChanged 过滤掉重复的事件。
这个例子有一个 network 事件，以模拟从服务器获取数据，但是这里我们只显示了 console.log 。你可以自行添加功能，比如把数据渲染到用户界面。
总结
在 RxJS 中使用 startWith 的时候，@basic-streams/start-with 是一个十分实用的 npm 包。通过它，我们可以在源 Observable 中插入一个或者多个事件，在不同场景下帮助我们实现各类有趣的功能。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f80238a385564ab6aff