RxJS API解析（一）

姘搁『发布于2019-08-19 17:23 / 503人阅读

摘要：选择后，仅有联通的可观察对象会被观察到。从外部看，所有订阅者仅能观测到这个联通了支流。，其中表示输入流，是操作符，是最后的输出流。截图验证一下当一个流被联通后，其他的流肿么办先记住结论未被选择的流将被调用方法，也就是说，他们被终止了。

起因

在SegmentFault里发布过一篇RxJS的简明教程，很多人反馈对这个主题很是很感兴趣，详见RxJS简明教程。

Rx 是一种编程的思维，而不是一个特定的框架或库。RxJS是Rx*基于Javascript语言栈的实现。
我决定，今后写一系列“深入浅出”的文章来介绍 Rx*。我选择RxJS作为base，所有的代码实例都会基于RxJS，这一系列文章主要会涉及以下几个方面：

我对Rx的理解，和使用中的感悟，不会拘泥于前端或是服务端。

对Rx*标准：对象、方法（API）的阐述，这部分相当于对API文档的翻译。

这个系列，坚持原创和对国外优秀材料的翻译。当然这是个浩大的工程，希望我可以坚持完成。

Rx* (Observable.amb & Observable#amb)

注：Object.method为对象方法，Object#method为实例方法

方法定义

[Rx.Observable.amb(...args)]

作用

从一系列流中，订阅最先发射的值的可观察对象并忽略其他的可观察对象。

参数

args (Array|arguments)：方法参数为多个可观察对象（流），或者是Promise对象，对象间存在竞争关系。

返回值

(Observable) ：方法返回呈竞争态的多个可观察对象中，首先发射的可观察对象。

总结

简单的说，amb()像一个多路电闸，一次仅能构建一条通路：

| | | | | | | |
A B C D E F G H
| | | | | | | |
     
         开关臂
          
       |
      主线
       |

函数需要做出选择，选择的依据就是哪一个可观察对象（流）先发射了值。选择后，仅有“联通”的可观察对象会被观察到。还是用电路做比喻，其中“ * ”表示电子：

*
| | | | | | |
    *
| | | | | | |
A B C D E F G
| | | | | | |
          *
| | | | | | |
  *
| | | | | | |
        *

可以看到，E支流的电子先到达了末端，所以E路被接通。从外部看，所有订阅者仅能观测到这个联通了E支流。

Rx官方喜欢使用珠宝图来解释各个操作符（函数）的作用，珠宝图表示amb()。

介绍一下牛逼的 珠宝图 ：

从左到右的箭头，代表时间轴。|代表可观察对象（流）发出了完成信号。
轴上的每一个珠宝代表流发射的值；

下方amd那个层是处理操作符，本图意味着所有操作符以上的流，都会经过操作符的处理（操作符以上的流为操作符的操作数）；

最下方，是操作符处理后的输出结果。
y = f(x)，其中x表示输入流，f()是操作符，y是最后的输出流。

观察上面的珠宝图，1, 2, 3这条时间轴上的可观察对象发射了值1，所以amb()选择了它作为最终输出的可观察对象。接下来如果它被订阅，订阅者会依次收到1,2 和 3。

当然，珠宝图不是静态的摆设 ！珠宝图不是静态的摆设 ！珠宝图不是静态的摆设！
我们可以拖动上面的每一个珠宝，来改变流中可观察对象的发射顺序：

我们拖动第一个时间轴——20, 40, 60上的可观察对象，把20这个珠宝拖到所有的珠宝前面（让其最先发射）。
依照amb()操作符的定义，我们可以推断，输出会变为20, 40, 60。截图验证一下：

当一个流被联通后，其他的流肿么办？先记住结论：未被选择的流将被调用dispose方法，也就是说，他们被终止了。

实例

HTML

JavaScript

input1 = $("#input1");
input2 = $("#input2");

var source = Rx.Observable.amb(
  Rx.Observable.fromEvent(input1, "click")
                              .map(()=>"one"),
  Rx.Observable.fromEvent(input2, "click")
                              .map(()=>"two")
);

上面例子中，amb()中传入了两个点击事件流。事件流1，会在点击后发射字符串one；事件流2，会在点击后发射字符串two；

初始情况下，产生事件流1之后，事件流2不会再被输出；反之亦然，我们可以订阅amb()产生的结果流：

var subscription = source.subscribe(
    function (x) {
        console.log(x);
    },
    function (err) {
        console.log("Error: " + err);   
    },
    function () {
        console.log("Completed");   
    });

具体可演示实例，可以进入amb()操作符演示。订阅结果会在控制台中输出。
当然，你可以在充分理解了amb()的原理之后修改可演示实例，验证自己的掌握程度。

题外话

上文提到过 Rx 是一种编程模式，几乎各个平台、语言栈都有实现。我们试着探讨下amb()更宽泛地应用：

秒杀系统 ：秒杀是一个高并发的场景，出现“多卖”是常态，“多卖”是由于秒杀商品的库存同步问题引起的。参与秒杀的用户呈竞争态，将请求分组后（比如100个一组），通过amd()可以甄选出具有购买资格的用户：因为秒杀的产品逻辑是：谁手快，谁买到。

Observable.amb(
    用户A的拍下请求,
    用户B的拍下请求,
    用户C的拍下请求,
    ...
).subscribe(function(user) {
    执行购买逻辑，创建订单，打开支付工具
})

移动电话：假设同一时间多个人呼叫你，你接通了最先到达的来电，这段时间内你就只能和他（她、它）通话了，其余呼叫者将会接收到忙音（对不起，你所呼叫的用户正在通话中，请稍后再拨）。

Observable.amb(
    A来电,
    B来电,
    C来电,
    ...
).subscribe(function(call) {
    通话吧啦吧啦
})

剧终

GPU云服务器云服务器 RxJS 引入rxjs 云解析api Rxjs_Subject

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78482.html

RxJS API解析（四）

摘要：任何程序设计语言在讲解递归特性时，基本都会举汉诺塔斐波拉契数列的例子。没错，请你对比一下斐波拉契数列和定义的相似之处递归完成后产生值的过程就是的过程。 Rx*(Observable.combineLatest)方法方法定义 Rx.Observable.combineLatest(...args, [resultSelector]) 作用通过处理函数总是将指定的可观察对象序列中最新发...

cheng10 2019-08-19 17:28 评论0 收藏0
RxJS API解析（三）

摘要：题外话服务可用性是指，服务提供者需要保证服务在任何时间情况下正确地提供。然后服务提供者，会将验证码发送到用户手机。 Rx* (Observable.catch)方法方法定义 Rx.Observable.catch(...args) 作用序列中可观察对象因为异常而被终止后，继续订阅序列中的其他可观察对象。参数 args (Array | arguments): 可观察对象序列。返...

banana_pi 2019-08-19 17:25 评论0 收藏0
RxJS API解析（二）

摘要：当无法匹配时，该对象被默认返回。如果没有明确指定，将返回附加了指定的对象。返回值返回值为经过选择后的可观察对象。题外话键值对，可以对值进行命名。键值对是对象的组成部分，键名可以方便进行查找和比较操作。 Rx* (Observable.case)方法方法定义 [Rx.Observable.case(selector, sources, [elseSource|scheduler])] ...

chanthuang 2019-08-22 11:00 评论0 收藏0
Rxjs 响应式编程-第二章：序列的深入研究

摘要：接下来，我们将实现一个真实的应用程序，显示几乎实时发生的地震。得到的由表示，其中包含和的合并元素。如果不同同时传出元素，合并序列中这些元素的顺序是随机的。是操作序列的强大操作符。但是的方法仍在运行，表明取消并不会取消关联的。 Rxjs 响应式编程-第一章：响应式Rxjs 响应式编程-第二章：序列的深入研究Rxjs 响应式编程-第三章: 构建并发程序Rxjs 响应式编程-第四章构建完整...

姘搁『 2019-08-23 10:55 评论0 收藏0
RxJS 6有哪些新变化？

摘要：有哪些新变化于年月日正式发布，为开发人员带来了一些令人兴奋的增补和改进。不要移除包，直到你将所有的链式操作修改为管道操作符。 RxJS 6有哪些新变化？ RxJs 6于2018年4月24日正式发布，为开发人员带来了一些令人兴奋的增补和改进。Ben Lesh, rxJS核心开发成员，强调： RxJS 6在拥有更小API的同时，带来了更整洁的引入方式提供一个npm包，该package可...

LeanCloud 2019-08-22 17:24 评论0 收藏0