美文网首页web前端
rxjs学习入门心得(三)Subscription订阅

rxjs学习入门心得(三)Subscription订阅

作者: 侬姝沁儿 | 来源:发表于2017-12-24 21:52 被阅读38次

    推荐我的Rxjs教程:Rxjs系列教程目录

    Subscription订阅

    什么是 Subscription(订阅) ? - Subscription(订阅) 是表示可清理资源的对象,通常是 Observable(可观察对象) 的执行。Subscription 有一个重要的方法,即 unsubscribe,它不需要任何参数,只是用来清理由 Subscription 占用的资源。在以往版本的 RxJS 中,Subscription 叫做 "Disposable" (可清理对象)。

    var observable = Rx.Observable.interval(1000)
    var subsc = observable.subscribe(x => console.log(x))
    // 稍后:
    // 这会取消正在进行中的 Observable 执行
    // Observable 执行是通过使用观察者调用 subscribe 方法启动的
    setTimeout(() => {
        subsc.unsubscribe()
    }, 1000)
    

    Subscription 基本上只有一个 unsubscribe() 函数,这个函数用来释放资源或去取消 Observable 执行。

    Subscription(订阅) 还可以合在一起,这样一个 Subscription(订阅) 调用unsubscribe()方法,可能会有多个 Subscription(订阅) 取消订阅 。你可以通过把一个 Subscription(订阅) 添加到另一个上面来做这件事:即subscriptions 可以通过 add() 方法进行分组,即可以给当前 Subscription 添加子 Subscription。 当 Subscription 被取消订阅,它所有的子孙 Subscription 都会被取消订阅。

    // 合并
    var observable1 = Rx.Observable.interval(500)
    var observable2 = Rx.Observable.interval(200)
    
    var subscription = observable1.subscribe(x => console.log('first: ' + x))
    var childSubsc = observable2.subscribe(x => console.log('second: ' + x))
    
    subscription.add(childSubsc)
    
    setTimeout(() => {
     // subscription 和 childSubsc 都会取消订阅
     subscription.unsubscribe()
    }, 1100)
    

    执行时,我们在控制台中看到:

    second: 0
    second: 1
    first: 0
    second: 2
    second: 3
    first: 1
    second: 4
    

    Subscriptions 还有一个 remove(otherSubscription) 方法,用来撤销一个已添加的子 Subscription 。

    var observ1 = Rx.Observable.interval(500)
    var observ2 = Rx.Observable.interval(300)
    var observ3 = Rx.Observable.interval(300)
    
    var subsc1 = observ1.subscribe(x => console.log('first: ' + x))
    var subsc2 = observ2.subscribe(x => console.log('second: ' + x))
    var subsc3 = observ3.subscribe(x => console.log('three: ' + x))
    
    subsc1.add(subsc2)
    subsc1.add(subsc3)
    
    setTimeout(() => {
     subsc1.remove(subsc2)
     subsc1.unsubscribe()
    }, 1100)
    

    执行时,我们在控制台中看到:

    second: 0
    three: 0
    first: 0
    second: 1
    three: 1
    second: 2
    three: 2
    first: 1
    second: 3
    second: 4
    second: 5
    ...
    

    second: n将会一直执行下去,我们添加了 subsc1.add(subsc2) , 在1.1S后移除了它,所以在 unsubscribe() 时,我们并没有清除掉它。

    API

    公有构造函数

    public constructor(unsubscribe: function(): void)

    名称 类型 属性 描述
    unsubscribe function(): void •可选的 描述 unsubscribe 方法被调用时该如何执行资源清理的函数。

    公有构件

    public closed: 类型boolean ,用来标示该 Subscription 是否被取消订阅的标示位。

    公有方法

    方法名 方法说明
    add(teardown: TeardownLogic): Subscription 添加一个 tear down 在该 Subscription 的 unsubscribe() 期间调用。如果清理是在已取消订阅的 subscription 时候添加的,那么它和 add 正在调用的引用是同一个, 或者是 Subscription.EMPTY, 它都不会被添加。如果该 subscription 已经在 closed 状态,传入的清理逻辑将会立即执行。
    remove(subscription: Subscription): void 从 Subscription 的内部列表中删除一个 Subscription。在该 Subscription 取消订阅的过程中 取消订阅。
    unsubscribe(): void 清理 subscription 持有的资源。例如,可以取消正在进行的 Observable 执行或取消在创建 Subscription 时启动的任何其他类型的工作。

    相关文章

      网友评论

        本文标题:rxjs学习入门心得(三)Subscription订阅

        本文链接:https://www.haomeiwen.com/subject/hebaixtx.html