npm 包 @basic-streams/start-with 使用教程-JavaScript中文网-JavaScript教程资源分享门户

是什么

@basic-streams/start-with 是一个基于 RxJS 的 npm 包，它提供了一个操作符，可在起始值发出前执行指定操作。如果你用到 RxJS 操作符，那么这个包一定会对你有帮助。

安装

你可以使用 npm 或者 yarn 安装这个包：

使用 npm：
npm install @basic-streams/start-with

使用 yarn：
yarn add @basic-streams/start-with

如何使用

这是一个简单的例子：

import { of } from 'rxjs';
import { startWith } from '@basic-streams/start-with';

const source$ = of('java', 'python', 'php').pipe(
  startWith('pre...')
);

source$.subscribe(console.log);

这个例子中，我们定义了 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