RXJ的功能反应性编程简介-js教程-PHP中文网

钥匙要点

结果应由以下图表示。绿色斑点是在指定的时间间隔之后（由用于构造间隔的时间给出的）。在此间隔期间，缓冲区将汇总所有看到的蓝色斑点。

运算符是纯粹的功能，可以启用强大的功能编程方式，以处理与'Map之类的操作的收藏'，''，'''，concat'，“减少”等。RXJ中有数十个可用的操作员可用于处理集合的复杂操作，无论它们是项目的数组，事件流还是什至承诺。

我可以使用具有角度的rxjs吗？它在Angular的HTTP模块中以及用于自定义事件的EventEmitter类中使用。

>承诺和可观察到的东西有什么区别？承诺是可能尚不可用的价值。它只能解决（实现或拒绝）一次。另一方面，可观察到的值是可以发出零或更多值的值，并且可以从。

rxjs中的主题是什么主题？多播归于许多观察者。与普通的观察者不同，受试者维持许多听众的注册表。

首页

web前端

js教程

RXJ的功能反应性编程简介

Jennifer Aniston

Feb 18, 2025 am 11:38 AM

RXJ的功能反应性编程简介

钥匙要点

反应性编程是一种使用并发数据流进行编程的方法，这可能是异步的。它可以应用于编程问题，因为CPU处理由指令和数据组成的信息流。

。可以从数组，承诺，功能和生成器创建> RXJS提供了许多引入并发性的操作员，例如油门，间隔或延迟。这些可用于通过指定的时间间隔汇总事件，或者用于在某个空闲时间后仅启动请求的节气门输入。> RXJS使JavaScript中的反应性编程更加容易，更有效。它统一了一组简洁且可复合的方法中反应性编程的一些概念。它还具有有用的扩展，例如RXJS-DOM，它简化了与DOM的相互作用。

本文由MoritzKröger，Bruno Mota和Vildan Softic审查。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！

>在我们深入研究主题之前，我们必须回答至关重要的问题：什么是反应性编程？截至今天，最受欢迎的答案是，反应性编程是通过并发数据流进行编程。大多数时候，我们会发现并发单词被异步取代，但是，稍后我们会在流中看到该流不必异步。

>很容易看到“一切都是流”方法可以直接应用于我们的编程问题。毕竟，CPU无非是处理由指令和数据组成的信息流的设备。我们的目标是观察该流并在特定数据的情况下进行转换。

反应性编程的原则并不是JavaScript的全新。我们已经有了属性绑定，eventEmitter模式或node.js流等属性。有时，这些方法的优雅性会导致性能下降，过于复杂的抽象或调试问题。通常，与新抽象层的优势相比，这些缺点是最小的。当然，我们最小的例子将不会反映通常的应用，而是要尽可能简短和简洁。

>不用更多的是，让我们通过使用JavaScript（RXJS）库的反应性扩展来弄脏我们的手。 RXJS使用了很多链接，这是一种流行的技术，在其他库中也使用。方法链条指南（在Ruby的背景下）可在SitePoint上找到。

>流示例

>在我们深入RXJS之前，我们应列出一些示例以后使用。这也将结束对反应性编程和流的简介。

>通常，我们可以区分两种流：内部和外部。虽然前者可以被视为人为的，但后者来自我们无法控制的来源。可以从我们的代码（直接或间接）触发外部流。

通常，流不等我们。无论我们是否可以处理它们，它们都会发生。例如，如果我们想在道路上观察汽车，我们将无法重新启动汽车。该流是独立于我们观察到的独立的。在RX术语中，我们称其为a

热可观察。 rx还引入了冷可观察物，其行为更像是标准迭代器，因此流中的信息由每个观察者的所有项目组成。 >以下图像说明了一些外部类型的流。我们看到（以前启动）请求并通常提到了Web挂钩，以及UI事件（例如鼠标或键盘交互）。最后，我们还可以从设备，例如GPS传感器，加速度计或其他传感器中接收数据。

>。

RXJ的功能反应性编程简介 >图像还包含一个流的流，称为

>消息

。消息可以以几种形式出现。最简单的表格之一是我们网站与其他网站之间的通信。其他示例包括与Websocket或Web工人的通信。让我们看看后者的一些示例代码。> >工人的代码在下面介绍。该代码试图从2到10

10 >找到质数。一旦找到一个数字，报告了结果。

> 通常，包括如下的Web Worker（假定在文件prime.js中）。为了简洁起见，我们跳过检查网络工作者的支持和返回结果的合法性。

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

登录后复制

有关网络工作者的更多详细信息以及具有JavaScript的多线程的更多详细信息，请参见文章与Parallel.JS。

的Parallel JavaScript。

考虑到上面的示例，我们知道质数遵循正整数之间的渐近分布。对于x至∞，我们获得x / log（x）的分布。这意味着我们将在开始时看到更多数字。在这里，支票也便宜得多（即，一开始我们会收到每单位时间的质量数量，而不是以后。）

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

登录后复制

）

可以用简单的时间轴和斑点来说明结果：>

RXJ的功能反应性编程简介

通过查看用户对搜索框的输入，可以给出一个无关但类似的示例。最初，用户可能会热情地输入一些要搜索的东西；但是，他的要求越具体，关键笔触之间的时差就越大。提供显示现场结果的能力绝对是可取的，可以帮助用户缩小他的要求。但是，我们不希望为每次钥匙中风执行请求，尤其是因为第一个键的执行非常快，而无需思考或需要专业化。

> 在两种情况下，答案是在给定时间间隔上汇总以前的事件。两个描述的方案之间的区别在于，在给定时间间隔之后应始终显示质数（即，某些质子数在介绍中可能会延迟）。相比之下，搜索查询只有在指定间隔期间未发生密钥冲程时触发新请求。因此，一旦检测到钥匙中风，计时器即将重置。

rxjs to Rescue RX是一个库，用于使用可观察的集合来组成异步和基于事件的程序。它以声明性的语法和合成性而闻名，同时引入了轻松的处理和错误模型。考虑到我们以前的示例，我们对处理时间特别感兴趣。尽管如此，我们将看到RXJ中还有更多可以从中受益的。 RXJ的基本构建块是可观察的（生产者）和观察者（消费者）。我们已经提到了两种可观察到的类型：

即使我们不订阅它们（例如，UI事件），

热可观察物也在推动。

>冷可观察物仅在我们订阅时才开始推动。如果我们再次订阅，他们会重新开始。

>冷可观察物通常是指已转换为在RXJ中使用的数组或单个值。例如，以下代码可创建一个冷观察，该冷可观察到仅在完成之前仅产生一个值：>

独立于可观察的类型。对于这两种类型，我们都可以提供三个功能，以满足由Onnext，OnError和on Completed组成的通知语法的基本要求。 Onnext回调是强制性的。

不订阅可观察到的可观察到的可观察到的可观察到的只是可观察的。然而，也可以使用发布方法将其转换为热序列（即，我们执行伪订阅）。

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

登录后复制

>返回单个异步结果的承诺，

>单个结果的功能，
用于提供迭代器的生成器。

> rxjs现在带来了用于提供异步多重（返回）值支持的数据类型。因此，现在填写了四个象限。

>需要拉动迭代器时，可以按下观察值的值。一个例子是事件流，我们不能强迫下一个事件发生。我们只能等待被事件循环通知。

RXJ的功能反应性编程简介

>创建或处理可观察到的大多数帮助者也接受调度程序，该调度程序可以控制订阅何时启动和发布通知。我们不会在此处详细介绍，因为默认调度程序用于大多数实际目的。 RXJ中的许多运算符引入并发性，例如油门，间隔或延迟。现在，我们将再次查看以前的示例，这些助手变得至关重要。

>示例

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

登录后复制

首先，让我们看一下我们的质子数生成器。我们想在给定的时间内汇总结果，以便UI（尤其是在开始时）不必处理太多更新。

>在这里，我们实际上可能想将RXJS的缓冲函数与前面提到的间隔辅助器结合使用。

结果应由以下图表示。绿色斑点是在指定的时间间隔之后（由用于构造间隔的时间给出的）。在此间隔期间，缓冲区将汇总所有看到的蓝色斑点。

此外，我们还可以介绍地图，这有助于我们转换数据。例如，我们可能需要转换收到的事件参数以获取传输数据作为数字。

fromevent函数使用标准事件发射极模式从任何对象构造可观察到的。缓冲区还将以零长度返回数组，这就是为什么我们介绍将流将流降低到非空数阵列的原因。最后，在此示例中，我们只对生成的质数数量感兴趣。因此，我们映射缓冲区以获得其长度。

>另一个示例是搜索查询框，应在某个空闲时间后才插入以启动请求。在这种情况下，有两个功能可能有用：节气门功能在指定的时间窗口中产生第一个条目。调试功能产生在指定的时间窗口中看到的最后一个条目。时间窗口也相应地移动（即相对于第一个 /最后一项）。

>我们想实现以下图所反映的行为。因此，我们将使用访问机制。

RXJ的功能反应性编程简介

>我们想丢弃所有以前的结果，并且仅在时间窗口耗尽之前获得最后一个结果。假设输入字段具有ID查询，我们可以使用以下代码：>

在此代码中，窗口设置为300ms。另外，我们限制了至少3个字符的值的查询，这与以前的查询不同。这消除了刚刚通过键入某些内容并删除刚刚纠正的输入的不必要的请求。

整个表达式中有两个至关重要的部分。一个是使用searchfor将查询文本转换为请求，另一个是switch（）函数。后者采用任何返回嵌套可观察物并仅从最新可观察到的序列产生值的函数。

<span>(function (start<span>, end</span>) {
</span>    <span>var n = start - 1;
</span>
    <span>while (n++ < end) {
</span>        <span>var k = Math.sqrt(n);
</span>        <span>var found = false;
</span>
        <span>for (var i = 2; !found && i <= k; ++i) {
</span>            found <span>= n % i === 0;
</span>        <span>}
</span>
        <span>if (!found) {
</span>            <span>postMessage(n.toString());
</span>        <span>}
</span>    <span>}
</span><span>})(2, 1e10);
</span>

登录后复制

创建请求的函数可以定义如下：>

请注意可观察到的可观察到的（可能导致无效的请求导致未定义），这就是为什么我们链接switch（）和where（）。

结论

rxjs在JavaScript中使反应性编程成为一个快乐的现实。作为替代方案，还有培根。但是，RXJS最好的事情之一是RX本身，它在许多平台上都可以使用。这使得向其他语言，平台或系统的过渡非常容易。它还在一系列简洁且可复合的方法中统一了反应性编程的一些概念。此外，存在几种非常有用的扩展，例如RXJS-DOM，这简化了与DOM的相互作用。

<span>var worker = new Worker('prime.js');
</span>worker<span>.addEventListener('message', function (ev) {
</span>    <span>var primeNumber = ev.data * 1;
</span>    <span>console.log(primeNumber);
</span><span>}, false);
</span>

登录后复制

您在哪里看到RXJS Shine？

经常询问有关功能反应性编程的问题

>功能编程和功能反应式编程之间有什么区别？，另一方面，FRP是FP的变体，涉及异步数据流。它将反应性编程模型与功能编程结合在一起。在FRP中，您可以表达静态（例如，数组）和动态（例如，鼠标点击，Web请求）数据流并对它们的更改做出反应。 rxjs如何适合功能反应性编程？ 🎜> rxjs（JavaScript的反应性扩展）是一个用于使用可观察力的反应性编程的库，可以更容易地组成异步或基于回调的代码。这使其非常适合功能反应性编程。使用RXJS，您可以使用其提供的运算符从各种来源创建数据流，并可以转换，组合，操纵或对这些数据流进行反应。

> RXJS中的可观察力是什么？ RXJS中的核心概念。它们是数据流，可以随着时间的推移发出多个值。他们可以发出三种类型的值：下一步，错误和完成。 “下一个”值可以是任何JavaScript对象，“错误”是一个错误对象，当出现问题时，“完整”没有任何值，它只是表明可观察到的可观察到不会再发射的值。 >
>如何处理rxjs中的错误？

rxjs提供了几个操作员来处理错误，例如catcherror和重试错误。 Catcheror操作员在可观察到的源中捕获了错误，并使用新的可观察或错误继续流。重试操作员在失败时可观察到的源可观察到。

> rxjs中的运算符是什么？