zoukankan      html  css  js  c++  java
  • RxJS合并操作符:concat、merge、forkJoin、zip、 combineLatest 、concatAll、mergeAll、switchAll

    forkJoin

    forkJoin合并的流,会在每个被合并的流都发出结束信号时发射一次也是唯一一次数据。 即所有的流都complete或者error时才会发射一次数据。

    zip

    zip工作原理如下,当每个传入zip的流都发射完毕第一次数据时,zip将这些数据合并为数组并发射出去;当这些流都发射完第二次数据时,zip再次将它们合并为数组并发射。以此类推直到其中某个流发出结束信号,整个被合并后的流结束,不再发射数据。

    zipforkJoin的区别在于,forkJoin仅会合并各个子流最后发射的一次数据,触发一次回调;zip会等待每个子流都发射完一次数据然后合并发射,之后继续等待,直到其中某个流结束(因为此时不能使合并的数据包含每个子流的数据)。

    combineLatest

    combineLatestzip很相似,combineLatest一开始也会等待每个子流都发射完一次数据,但是在合并时,如果子流1在等待其他流发射数据期间又发射了新数据,则使用子流最新发射的数据进行合并,之后每当有某个流发射新数据,不再等待其他流同步发射数据,而是使用其他流之前的最近一次数据进行合并。

    concat

    按照顺序,前一个 observable 完成(complete)了再订阅下一个 observable 并发出值 。即前一个observable发出complete信号后,才会订阅下一个observable。

    merge

    merge 把多个 observable 同时处处理, 当多个 observable 其中一个被触发时都可以被处理,这很常用在一个以上的按钮具有部分相同的行为。

    例如一个影片播放器有两个按钮,一个是暂停(II),另一个是结束播放(口)。这两个按钮都具有相同的行为就是影片会被停止,只是结束播放会让影片回到 00 秒,这时我们就可以把这两个按钮的事件 merge 起来处理影片暂停这件事。

    concatAll、mergeAll、switchAll属于高阶 Observable 的 操作符。都是用来打平Observable的。

    所谓的 Higher Order Observable 就是指一个 Observable 发送出的元素还是一个 Observable,就像是二维数组一样,一个数组中的每个元素还是数组。

    如果用TypeScript中的泛型来表达就像是Observable<Observable<T>>,通常我们需要的是第二层 Observable 送出的元素,所以我们希望可以把二维的 Observable 改成一维的,像是下面这样 Observable<Observable<T>> => Observable<T>

    concatAll

    处理完前一个 observable 才会在处理下一个 observable。依次按顺序执行一个个observable

    switchAll

    新的 observable 送出后直接处理新的 observable 不管前一个 observable 是否完成,每当有新的 observable 送出就会直接把旧的 observable 退订(unsubscribe),永远只处理最新的 observable!

    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'); }
      });
    
  • 相关阅读:
    nginx 启动相关的
    爬取豆瓣读书/文件存储数据/数据库存储数据
    python Web 开发三剑客比较
    scrapy
    爬虫自动登录抽屉
    组合搜索
    html瀑布流
    Ajax上传文件/文件预览
    Form组件
    django分页
  • 原文地址:https://www.cnblogs.com/cherishSmile/p/11768390.html
Copyright © 2011-2022 走看看