专栏首页finleyMaRxJS 学习系列 12. 合并操作符 concatAll, mergeAll, switchAll

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 条评论
登录 后参与评论

相关文章

  • docker学习系列12 轻松实现 mysql 主从同步

    docker的一大好处是在本地可以很方便快速的搭建负载均衡,主从同步等需要多主机的环境。 可以说是极大方便了运维成本和难度。 本节在本地搭建mysql的一主...

    mafeifan
  • Angular 关于pipe

    Angular 中的管道其实就是angularjs中的过滤器,用来转换数据然后显示给用户。 要创建一个管道,必须实现 PipeTransform 接口。这个接...

    mafeifan
  • storybook的介绍和使用 比较火的响应式UI开发及测试环境

    storybook是一套最近比较火的响应式UI 开发及测试环境。 可以可视化开发调试react,vue组件 官网:https://github.com/st...

    mafeifan
  • 【译】RxJava变换操作符:-concatMap(-)与-flatMap(-)的比较

    是时候回归写作了。(译者注:原作者吧啦吧啦唠家常,这里就不做翻译了,但是,有两个重要的链接,点我,再点我)

    用户1740424
  • RxJava2.x 五种观察者和操作符简介

    RxJava 提供了一系列操作符,可以使用它们来过滤(Filter)、选择(select)、变换(transform)、结合(combine)和组合(compo...

    Vance大飞
  • 美团点评Kubernetes集群管理实践

    今日头条丨一点资讯丨腾讯丨搜狐丨网易丨凤凰丨阿里UC大鱼丨新浪微博丨新浪看点丨百度百家丨博客中国丨趣头条丨腾讯云·云+社区

    数据猿
  • 美团点评Kubernetes集群管理实践

    作为国内领先的生活服务平台,美团点评很多业务都具有非常显著、规律的“高峰”和“低谷”特征。尤其遇到节假日或促销活动,流量还会在短时间内出现爆发式的增长。这对集群...

    美团技术团队
  • 后端API从入门到放弃指北

    使用Spring boot 搭建Web API,通过Web API对数据增删查改.

    py3study
  • 后端API入门学习指北

    使用Spring boot 搭建Web API,通过Web API对数据增删查改.

    李国宝
  • PHPStorm从2018.2版本起将启用新的License Server加密算法和通信协议,请不要再升级

    今天使用Toolbox App升级PHPStorm到2018.1.6的时候,忽然弹出了这么一个警告:

    猿哥

扫码关注云+社区

领取腾讯云代金券