RxJS: map, flatMap和flatMapLatest的区别

时间 2019-11-07

标签 rxjs map flatmap flatmaplatest 区别繁體版

原文原文链接

在这篇文章中我会对map,flatMap和flatMapLatest三个操做符进行比较，下面咱们来举个例子。服务器

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

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

咱们再来看另外一个例子。异步

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

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

若是我想要拿到那些数字，我该怎么办？code

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

这里使用了flatMap而不是map。flatMap将响应数据“打平”，也就是说把映射后新的Observable转化为了数据流，订阅以后会得到这个新Observable发射的数据，而不是Observable自己。blog

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

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

使用flatMap就能够直接获取到新的Observable返回的数据。可是这里存在一个问题，若是用户有屡次输入，因为网络缘由可能会发生前一次响应时间比后一次长的状况，这时后一次的结果就被覆盖了。
flatMapLatest能够解决这个问题。若是以前的Observable尚未未触发，而又收到了新的Observable，flatMapLatest会取消以前的Observable，只处理最新收到的Observable，这样就保证了处理请求的前后顺序，flatMapLatest在RxJS 5.x中已改名为switchMap。input