RxJs高阶运算——switchMap

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

上一节我们学习了mergeMap的相关知识,我们知道了在并发执行的时候,我们可以使用mergeMap来达到效果。今天我们学习另一个高阶运算符switchMap。

同样的道理,我们想要学习理解switchMap,我们首先得知道什么是switch?

Observable Switching

switch的概念更接近于merging而不是concatenation,因为我们不等待任何 Observable 终止。但是在switching时,与concatenation不同,如果一个新的 Observable 开始发出值,我们将在订阅新的 Observable ,取消订阅之前的 Observable。

Observable switching就是确保未使用的 Observable 的退订逻辑被触发,从而释放资源!

Switch弹珠图

RxJs switch Example

注意对角线,这些不是偶然的!在切换策略的情况下,在图中表示高阶 Observable 很重要,它是图像的顶线。这个高阶 Observable 发出本身就是 Observable 的值。对角线从高阶 Observable 顶线分叉的时刻,是 Observable 值被发出并通过 switch 订阅的时刻。

分解弹珠图

1、高阶 Observable 发出它的第一个内部 Observable (a-b-c-d),它被订阅(通过 switch 策略实现)

2、第一个内部 Observable (a-b-c-d) 发出值 a 和 b,它们会立即反映在输出中

3、但是随后第二个内部 Observable (e-f-g) 被发出,这触发了从第一个内部 Observable (a-b-c-d) 的取消订阅,这是切换的关键部分

4、然后第二个内部 Observable (e-f-g) 开始发出新值,这些值反映在输出中

5、但请注意,第一个内部 Observable (a-b-c-d) 同时仍在发出新值 c 和 d

6、然而,这些后来的值并没有反映在输出中,那是因为我们同时取消了第一个内部 Observable (a-b-c-d) 的订阅

我们现在可以理解为什么必须以这种不寻常的方式绘制图表,使用对角线:这是因为我们需要直观地表示每个内部 Observable 何时被订阅(或取消订阅),这发生在对角线从源高阶 Observable 分叉的点处。

 

好了,理解了switch的原理,我们现在可以来看看switchMap。

SwitchMap操作符

假设我们有一个普通的输入流,它发出值 1、3 和 5。然后我们将每个值映射到一个 Observable,就像我们在 concatMap 和 mergeMap 的情况下所做的那样,并获得一个更高阶的 Observable。如果我们现在在发出的内部 Observable 之间切换,而不是连接它们或合并它们,我们最终得到 switchMap 运算符:

switchMap弹珠图

RxJs switchMap Example

弹珠图分解

1、源 observable 发出值 1、3 和 5

2、然后通过映射函数将这些值转换为 Observables

3、映射的内部 Observable 被 switchMap 订阅

4、当内部 Observable 发出一个值时,该值会立即反映在输出中

5、但是如果在前一个 Observable 有机会完成之前发出了一个像 5 这样的新值,则前一个内部 Observable (30-30-30) 将被取消订阅,并且它的值将不再反映在输出中

6、注意上图中红色的 30-30-30 内部 Observable:最后的 30 值没有发出,因为 30-30-30 内部 Observable 被取消订阅

正如我们所见,Observable 切换就是确保我们从未使用的 Observable 中触发取消订阅逻辑。现在让我们看看 switchMap 的实际效果!

 

版权声明:著作权归作者所有。

相关推荐

禁止UITableView选中高亮显示

去掉UITableViewCell的Selection style即可Objective-Ccell.selectionStyle = UITableViewCellSelectionStyleNone; 或者[cell setSelectionStyle:UITableViewCellSelectionStyleNone]; Swift 2cel

iOS11固定UISearchBar在导航栏的高度

iOS 11重新设计了UISearchBar,四个角改为圆角,高度变大。在导航栏添加搜索框可能会导致导航栏高度变大,所以有必要固定UISearchBar的高度。固定搜索栏的高度为44let searchBar = UISearchBar()  //配置searchBar相关代码 navigationItem.titleView =&nbs

Kotlin实现Java的三元条件运算

在Kotlin没有类似Java的三元条件运算:a ? b : c 在Kotlin有几种等效的方法:ifval r =if (a) b else c whenval r = when(a) {     true 

Python : 数值以及数值运算

数值类型Python的数值类型包括:整数int ,浮点数float和复数。其他的数值类型包括:Decimal和分数Fraction。int:整数不限精度float:Python里的浮点数使用C语言的double实现,其精度由运行的系统决定,可以使用sys.float_info查看精度信息。复数:复数的虚数部分有j或J表示,如1+2j。其中实数和虚数的数值部分使用浮点数表示,它们可以使用z

C#计算用户年龄

此方法仅用于简单计算年龄,不适用于计算虚岁public static int GetAge(DateTime birthDate) {     DateTime now = DateTime.Now;      int age&n

JavaScript ES6扩展运算符(...)用例

ES6新增了扩展运算符,它的语法很简单,使用三个点号表示“...”。它的作用是把数组展开为类似用逗号隔开的参数列表。这里介绍几种用例来理解扩展运算符的使用。用例1:插入数组如果我们要在一个数组插入另外一个数组的元素,可以结合splice和apply使用,如:a1 = [1,2,5,6,7]; a2 = [3,4]; a1.splice.apply(a1,&n

Rxjs expand的用法分析

Rxjs的expand()函数声明:public expand(project: function(value: T, index: number), concurrent: number, scheduler: Scheduler): Observable expand()会递归调用project函数,project函数把源值映射为一个Observable,每次递归

Swift禁止UITableView选中高亮

禁止UITableView选中高亮,可以对UITableViewCell实例设置样式:Swift 2cell.selectionStyle = UITableViewCellSelectionStyle.None Swift 3cell.selectionStyle = .none

运行PowerShell脚本.ps1

在PowerShell执行脚本1、打开Windows PowerShell2、进入脚本所在的文件夹PS> cd C:\topath\3、执行powershell脚本PS> .\myscript.ps1 在CMD执行脚本powershell -noexit "& ""C:\topath\myscript.ps1"""快捷执行在脚本文件.ps1点击右键,然后点击 “使用P

CKEditor 5设置编辑器高度

CKEditor 5提供的几种编辑器,它们的高度是随着内容变化的,官方没有提供设置编辑器高度的参数配置。如果要给编辑器固定高度有以下两种做法。对于经典版(classic editor build),可以通过CSS:.ck-editor__editable_inline {  height: 200px;}对于所有版本,可以通过js来设置:editor.editing.view.chang