取消订阅RxJS Observables

时间:2016-11-12 05:01:33

标签: javascript node.js rxjs reactive-programming rxjs5

我有这两个对象,我想停止听他们的事件。我对于observables和RxJS都很陌生,只是尝试使用Inquirer库。

以下是RxJS API供参考: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

如何取消订阅这些类型的可观察资料?

ConnectableObservable:

   ConnectableObservable {
     source: EventPatternObservable { _add: [Function], _del: [Function], _fn: undefined },
     _connection: ConnectDisposable { _p: [Circular], _s: [Object] },
     _source: AnonymousObservable { source: [Object], __subscribe: [Function: subscribe] },
     _subject: 
      Subject {
        isDisposed: false,
        isStopped: false,
        observers: [Object],
        hasError: false } },
  _count: 1,
  _connectableSubscription: 
   ConnectDisposable {
     _p: 
      ConnectableObservable {
        source: [Object],
        _connection: [Circular],
        _source: [Object],
        _subject: [Object] },
     _s: AutoDetachObserver { isStopped: false, observer: [Object], m: [Object] } } }

FilterObservable:

FilterObservable {
  source: 
   RefCountObservable {
     source: 
      ConnectableObservable {
        source: [Object],
        _connection: [Object],
        _source: [Object],
        _subject: [Object] },
     _count: 1,
     _connectableSubscription: ConnectDisposable { _p: [Object], _s: [Object] } },
  predicate: [Function] }

我需要取消订阅这些对象:

'use strict';
var rx = require('rx');

function normalizeKeypressEvents(value, key) {
  return {value: value, key: key || {}};
}

module.exports = function (rl) {

  var keypress = rx.Observable.fromEvent(rl.input, 'keypress', normalizeKeypressEvents)
    .filter(function (e) {
      // Ignore `enter` key. On the readline, we only care about the `line` event.
      return e.key.name !== 'enter' && e.key.name !== 'return';
    });

  return {
    line: rx.Observable.fromEvent(rl, 'line'),

    keypress: keypress,

    normalizedLeftKey: keypress.filter(function (e) {
      return e.key.name === 'left';
    }).share(),

    normalizedRightKey: keypress.filter(function (e) {
      return e.key.name === 'right';
    }).share(),

    normalizedUpKey: keypress.filter(function (e) {
      return e.key.name === 'up' || e.key.name === 'k' || (e.key.name === 'p' && e.key.ctrl);
    }).share(),

    normalizedDownKey: keypress.filter(function (e) {
      return e.key.name === 'down' || e.key.name === 'j' || (e.key.name === 'n' && e.key.ctrl);
    }).share(),

    numberKey: keypress.filter(function (e) {
      return e.value && '123456789'.indexOf(e.value) >= 0;
    }).map(function (e) {
      return Number(e.value);
    }).share(),

    spaceKey: keypress.filter(function (e) {
      return e.key && e.key.name === 'space';
    }).share(),

    aKey: keypress.filter(function (e) {
      return e.key && e.key.name === 'a';
    }).share(),

    iKey: keypress.filter(function (e) {
      return e.key && e.key.name === 'i';
    }).share()
  };
};

我目前最好的猜测是没有明确的订阅调用如下:

var source = Rx.Observable.fromEvent(input, 'click');

var subscription = source.subscribe(
  function (x) {
    console.log('Next: Clicked!');
  },
  function (err) {
    console.log('Error: %s', err);
  },
  function () {
    console.log('Completed');
  });

但相反,有这些电话:

events.normalizedUpKey.takeUntil(validation.success).forEach(this.onUpKey.bind(this));
events.normalizedDownKey.takeUntil(validation.success).forEach(this.onDownKey.bind(this));

所以我最好的猜测是我需要一种方法来取消/取消takeUntil调用。

3 个答案:

答案 0 :(得分:15)

如果您想取消订阅,则需要拥有Subscription对象。这是从每个Observable.subscribe()电话返回的对象。例如:

let subscriber = Observable.subscribe(...);
...
subscriber.unsubscribe();

有关详细信息,请参阅:https://github.com/ReactiveX/rxjs/blob/master/doc/subscription.md

答案 1 :(得分:3)

我是第一位评论者所说的。 但是感觉需要在代码中的某个地方进行这样的调用:

let subscription = normalizedUpKey.subscribe( data => console.log('data') );

你可以做到

subscription.unsubscribe()

上。你怎么知道什么事情发生,或者是第三方图书馆的那部分?

阅读有关Rxjs的更多信息。我建议你看一下这本免费的书,https://www.gitbook.com/book/chrisnoring/rxjs-5-ultimate/details

答案 2 :(得分:1)

没有必要也没有协议来取消订阅观察。实际上,我在你的问题中看到了代码,特别是返回对象的一部分,其中包含了由share组成的一堆可观察对象。但是,这些可观察对象仍然是可观察的,而不是订阅,这意味着这些元素没有这样的概念unsubscribing

因此,如果您在模块外部有一些类似于订阅的新代码并且正好使用事件可观察对象,那么您显然可以取消订阅特定的订阅实例。

目前,对于问题中的代码,源observable上使用的方法都是运算符,例如.filter() .share() .takeUntil(),而不是订阅执行,这实际上是方法返回新的observables。

如Rxjs官方文档中所述,虽然.share()创建multicasted observables, 如果在使用一些方便的运算符时,如果订阅者数量从1减少到0,则执行仍有可能停止执行,其中代码中的.share()也包含在内。

总之,您无需担心在您的问题中取消订阅代码的事件。潜在地,确实存在一个问题,听起来像您的问题中描述的问题:如果您使用.connect()而不是.share()。关于手动取消事件绑定需要关注ConnectableObservable的情况。