RxJS 学习系列 12. 合并操作符 concatAll, mergeAll, switchAll

这节讲处理高阶 Observable 的操作符 所谓的 Higher Order Observable 就是指一个 Observable 发送出的元素还是一个 Observable,就像是二维数组一样,一个数组中的每个元素还是数组。如果用TypeScript中的泛型来表达就像是

Observable<Observable<T>>

通常我们需要的是第二层 Observable 送出的元素,所以我们希望可以把二维的 Observable 改成一维的,像是下面这样 Observable<Observable<T>> => Observable<T>

其实想要做到这件事有三个方法 switchAll、mergeAll 和 concatAll,其中 concatAll 我们在上节已经稍微讲过了,今天这篇文章会讲解这三个 operators 各自的效果跟差异。

先看各自最重要的特点:

  • concatAll: 处理完前一个 observable 才会在处理下一个 observable。依次按顺序执行一个个observable
  • switchAll:新的 observable 送出后直接处理新的 observable 不管前一个 observable 是否完成,每当有新的 observable 送出就会直接把旧的 observable 退订(unsubscribe),永远只处理最新的 observable!

注意:RxJS5 中叫switch,由于与Javascript保留字冲突,RxJS 6中对以下运算符名字做了修改:do -> tap, catch ->catchError, switch -> switchAll, finally -> finalize

  • mergeAll:并且能够同时并行处理所有的 observable

看下面的例子,我们可以切换为 concatAll,mergeAll,switchAll 体验区别

  const example = fromEvent(document.body, 'click')
    .pipe(
      // map 把送出的event事件转换为 Observable
      // 每次点击送出一个新的 Observable
      map(e => {
        // console.log(e);
        // 生成新的 Observable,点击一次输出0,1,2
        return interval(1000).pipe(take(3))
      }),
     
     // concatAll 比如快速点击三次,会按顺序输出三次0,1,2
     // switchAll 快速点击,只输出一次0,1,2,也就是说老的舍去只保留最新的
     // mergeAll 快速点击,会重复的输出多次0,1等。点击越多下,最后送出的频率就会越快。不会舍去,每次都会输出
      switchAll()
    );


  example.subscribe({
    next: (value) => { console.log(value); },
    error: (err)  => { console.log('Error: ' + err); },
    complete: ()  => { console.log('complete'); }
  });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏农夫安全

优秀博客文章 | javascript跨域方法总结

最近面试问的挺多的一个问题,就是JavaScript的跨域问题。在这里,对跨域的一些方法做个总结。由于浏览器的同源策略,不同域名、不同端口、不同协议都会构成跨域...

13120
来自专栏TSW

5201314对程序员意味着什么?

作为年轻人的潮流聚集地,Qzone在每个特殊的日子总会迎来一波猛烈的流量冲击。比如刚过去的520,下图是今年5月20号的流量情况:

9320
来自专栏码匠的流水账

聊聊springboot jest autoconfigure

spring-boot-autoconfigure-2.1.4.RELEASE-sources.jar!/org/springframework/boot/au...

26730
来自专栏一丘一壑

Code Embed:在WordPress文章和页面中添加Javascript的最佳插件

自从又开始迷上了WordPress,每天都会花不少时间在WordPress相关的网站上闲逛,这感觉竟然有点像分手复合又陷入了热恋的情人,没事就腻歪在一起,要把之...

22340
来自专栏FREE SOLO

JavaScript和Java的区别?

它是运行在浏览器中的一种脚本语言,在web页面中,Javascript可谓是无所不能:

23530
来自专栏vivo互联网技术

【干货】容器Web Console技术实现

现如今,随着容器技术的普及,越来越多的公司都开始尝试将其与自身的业务相结合,以提高生产和运维效率。

30710
来自专栏phodal

除了框架,前端面试还问什么

前后端分离的开发模式也让前端开发者的地位日益提升,待遇日渐水涨船高,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图。

9720
来自专栏加米谷大数据

如何选择适合自己的编程语言并高效的学习它?

编程语言这么多,使许多想入行IT的初学者感到迷茫不已,哪些语言最流行?哪些语言发展好?哪门语言简单易学?... 今天,加米谷大数据就来简单说一下。

11010
来自专栏小狼的世界

Elastic{ON}参会随手记

同事送了一张Elastic{ON}的票,因为我们的产品中用到的ELK全家桶,实话说用的体量还挺大的,因此非常想去参加这次的发布会。

9020
来自专栏马涛涛的专栏

Node.js基础9:web 服务器1 请求与响应、路由

例如我们访问一个网站,www.123.com/index 这个/index就是路由,访问不同的页面路由就不一样,后台处理的方式也不一样,这样用来请求不同的资源....

11040

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励