博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
RxJS: map, flatMap和flatMapLatest的区别
阅读量:5732 次
发布时间:2019-06-18

本文共 1022 字,大约阅读时间需要 3 分钟。

在这篇文章中我会对map,flatMapflatMapLatest三个操作符进行比较,下面我们来举个例子。

let stream = Observable.interval(1000).take(10);return stream.map(n => n * 2);

上面的代码模拟了异步行为,每隔1s发射一个数字。这个例子很简单,你会随着时间推移得到一连串的数字。

AAEAAQAAAAAAAAltAAAAJDEyYTNhMjQ4LTIxYWEtNDMwNi1iZGM2LThkOTMxYzBhNGZhZA.png

我们再来看另一个例子。

let stream = Observable.interval(1000).take(10);return stream.map(n => Observable.timer(500).map(() => n));

这里stream会返回一个Observable而不是数字。

AAEAAQAAAAAAAAetAAAAJDkwMGVhNTIzLWMyMGMtNGEyZi04MTZhLWQ2ZjQ2Njc4ZTI4ZQ.png

如果我想要拿到那些数字,我该怎么办?

let stream = Observable.interval(1000).take(10);return stream.flatMap(n => Observable.timer(500).map(() => n));

这里使用了flatMap而不是mapflatMap将响应数据“打平”,也就是说把映射后新的Observable转化为了数据流,订阅之后会获得这个新Observable发射的数据,而不是Observable本身。

AAEAAQAAAAAAAAcrAAAAJDc2NDA3NmExLWJiNjItNDdmNC05ZDBhLTczNzZjNTIwNTQ3Yw.png

译者注:flatMap有一个很适用的场景,就是搜索框。在用户输入一串字符后,将其发送到服务器并获取搜索结果,这里就涉及到两个Observable

Observable.fromEvent($input, 'keyup').flatMap(text => getHttpResponse(text)).subscribe(data => console.log(data))

使用flatMap就可以直接获取到新的Observable返回的数据。但是这里存在一个问题,如果用户有多次输入,由于网络原因可能会发生前一次响应时间比后一次长的情况,这时后一次的结果就被覆盖了。

flatMapLatest可以解决这个问题。如果之前的Observable还没有未触发,而又收到了新的ObservableflatMapLatest会取消之前的Observable,只处理最新收到的Observable,这样就保证了处理请求的先后顺序,flatMapLatestRxJS 5.x中已更名为switchMap

转载地址:http://zfmwx.baihongyu.com/

你可能感兴趣的文章
滑动窗口的最大值
查看>>
[转载]大话MVP
查看>>
基于DOM的XML文件操作
查看>>
【Day29 】Soket编程
查看>>
Angular的MVC理解--节自Adam Free的Pro angularv2
查看>>
C/S打包(图文)
查看>>
django之http协议、django基础-56
查看>>
MS SQL Server:分区表、分区索引详解
查看>>
第一章第二章
查看>>
实现使用“*”打印直角三角形
查看>>
py 的 第 23 天
查看>>
Ubuntu 安装后要做的事情
查看>>
Linux基础守护进程、高级IO、进程间通信
查看>>
纯CSS3个性化圆形按钮登录表单
查看>>
redis 命令
查看>>
linux中安装mysql
查看>>
python的开发环境
查看>>
[转载]大数据存取的选择:行存储还是列存储?
查看>>
ArcticCore重构-问题列表1
查看>>
PAT 1093 Count PAT's[比较]
查看>>