[RxJS] `add` Inner Subscriptions to Outer Subscribers to `unsubscribe` in RxJS

转载于 2018-09-29 03:50:00 发布 · 95 阅读

本文介绍了一种在创建新的内部源和订阅时避免失去控制的方法。通过使用Subscriber类的add方法来添加内部订阅，可以确保即使外部订阅者取消订阅，内部订阅也能保持同步并继续运行，直到其自身完成。

When subscribers create new "inner" sources and subscriptions, you run the risk of losing control of them when the outer subscriber unsubscribes. This is handled easily enough if you use the add method from the Subscriber class to add the "inner" subscription to the Subscriber.

class MyConcatMapSubscriber extends Subscriber {
  innerSubscription
  buffer = []

  constructor(sub, fn) {
    super(sub)

    this.fn = fn
  }

  _next(value) {
    const { isStopped } = this.innerSubscription || {
      isStopped: true
    }

    if (!isStopped) {
      this.buffer = [...this.buffer, value]
    } else {
      const o$ = this.fn(value)

      this.innerSubscription = o$.subscribe({
        next: value => {
          this.destination.next(value)
        },
        complete: () => {
          console.log(this.buffer)
          if (this.buffer.length) {
            const [first, ...rest] = this.buffer
            this.buffer = rest
            this._next(first)
          }
        }
      })

      // to tell when the outter subscription complete, the inner subscription should also completed
      this.add(this.innerSubscription)
    }
  }
}