[RxJS] Implement RxJS `mergeMap` through inner Observables to Subscribe and Pass Values Through

最新推荐文章于 2021-08-05 19:00:52 发布

weixin_30244889

最新推荐文章于 2021-08-05 19:00:52 发布

阅读量41

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/9715051.html

本文深入探讨了RxJS库中mergeMap操作符的工作原理，通过创建自定义的MyMergeMapSubscriber类来解析其内部机制。文章展示了如何使用mergeMap处理事件流，通过实例演示了outer next和inner next的概念，以及如何利用delay和scan操作符增强功能。

Understanding sources and subscribers makes it much easier to understand what's going on with mergeMap under the hood. Where a typical operator invokes destination.next directly, mergeMap wraps destination.next inside of a new source/subscriber combo so there's an "outer" next and an "inner" next.

import { fromEvent, of, Subscriber } from "rxjs"
import {
  scan,
  delay,
  mergeMap
} from "rxjs/operators"

class MyMergeMapSubscriber extends Subscriber {
  constructor(sub, fn) {
    super(sub)

    this.fn = fn
  }

  _next(value) {
    console.log(`outer`, value)
    const o$ = this.fn(value)

    o$.subscribe({
      next: value => {
        console.log(`  inner`, value)
        this.destination.next(value)
      }
    })
  }
}

const myMergeMap = fn => source =>
  source.lift({
    call(sub, source) {
      source.subscribe(
        new MyMergeMapSubscriber(sub, fn)
      )
    }
  })

const observable$ = fromEvent(
  document,
  "click"
).pipe(
  scan(i => i + 1, 0),
  myMergeMap(value => of(value).pipe(delay(500)))
)

const subscriber = {
  next: value => {
    console.log(value)
  },
  complete: () => {
    console.log("done")
  },
  error: value => {
    console.log(value)
  }
}

observable$.subscribe(subscriber)