RxJS -- Subscription
Subscription是什么?
当subscribe一个observable的时候, 返回的就是一个subscription. 它是一个一次性对象(disposable), 它有一个非常重要的方法 ubsubscribe(), 它没有参数, 它会dispose掉subscription所持有的资源, 或者叫取消observable的执行.
第一个例子:
import { Observable } from "rxjs/Observable";
import { Subscription } from "rxjs/Subscription";
import 'rxjs/add/observable/interval'; const observable = Observable.interval(1000); const subscription = observable.subscribe(x => console.log(x)); console.log(subscription); subscription.unsubscribe(); console.log(subscription);
运行结果是这样的:
Subscriber {
closed: false,
_parent: null,
_parents: null,
_subscriptions:
[ AsyncAction {
closed: false,
_parent: [Circular],
_parents: null,
_subscriptions: null,
scheduler: [AsyncScheduler],
work: [Function],
pending: true,
state: [Object],
delay: 1000,
id: [Timeout] } ],
syncErrorValue: null,
syncErrorThrown: false,
syncErrorThrowable: false,
isStopped: false,
destination:
SafeSubscriber {
closed: false,
_parent: null,
_parents: null,
_subscriptions: null,
syncErrorValue: null,
syncErrorThrown: false,
syncErrorThrowable: false,
isStopped: false,
destination:
{ closed: true,
next: [Function: next],
error: [Function: error],
complete: [Function: complete] },
_parentSubscriber: [Circular],
_context: [Circular],
_next: [Function],
_error: undefined,
_complete: undefined } }
Subscriber {
closed: true,
_parent: null,
_parents: null,
_subscriptions: null,
syncErrorValue: null,
syncErrorThrown: false,
syncErrorThrowable: false,
isStopped: true,
destination:
SafeSubscriber {
closed: false,
_parent: null,
_parents: null,
_subscriptions: null,
syncErrorValue: null,
syncErrorThrown: false,
syncErrorThrowable: false,
isStopped: false,
destination:
{ closed: true,
next: [Function: next],
error: [Function: error],
complete: [Function: complete] },
_parentSubscriber: [Circular],
_context: [Circular],
_next: [Function],
_error: undefined,
_complete: undefined } }
注意两次控制台输出的closed属性的值是不同的, true表示已经unsubscribe()了.
在ubsubscribe之后, _subscriptions属性也变成空了, 之前它是一个数组, 说明subscription可以是多个subscriptions的组合.
毁灭函数
如果使用Observable.create方法的话, 它的参数函数可以返回一个function. 而subscription在unsubscribe这个observable的时候, 会调用这个参数函数返回的function, 看例子:
import { Observable } from "rxjs/Observable";
import { Subscription } from "rxjs/Subscription";
import 'rxjs/add/observable/interval'; const observable = Observable.create(observer => { let index = 1;
setInterval(() => {
observer.next(index++);
}, 200); return () => {
// 在这可以做清理工作
console.log('我在Observable.create返回的function里面...');
};
}); const subscription = observable.subscribe(
x => console.log(x),
err => console.error(err),
() => console.log(`complete..`)
); setTimeout(() => {
subscription.unsubscribe();
}, 1100);
运行结果:
这个例子很好的解释了我写的那一堆拗口的解释..
retry, retryWhen的原理
直接举例:
import { Observable } from "rxjs/Observable";
import { Subscription } from "rxjs/Subscription";
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/retry'; const observable = Observable.create(observer => { setInterval(() => {
observer.next('doing...');
observer.error('error!!!');
}, 200); return () => {
// 在这可以做清理工作
console.log('我在Observable.create返回的function里面...');
};
}).retry(4); observable.subscribe(
x => console.log(x),
err => console.error(err),
() => console.log(`complete..`)
);
可以看到, 每次执行next之后都会有错误, 重试4次.
运行结果:
可以看到, retry/retryWhen其实的原理即是先unsubscribe然后再重新subscribe而已, 所以每次retry都会运行我所称的毁灭函数.
操作多个Subscriptions
多个subscriptions可以一起操作, 一个subscription可以同时unsubscribe多个subscriptions, 使用add方法为subscription添加另一个subscription. 对应的还有一个remove方法.
直接举官网的例子:
var observable1 = Observable.interval(400);
var observable2 = Observable.interval(300); var subscription = observable1.subscribe(x => console.log('first: ' + x));
var childSubscription = observable2.subscribe(x => console.log('second: ' + x)); subscription.add(childSubscription); setTimeout(() => {
// Unsubscribes BOTH subscription and childSubscription
subscription.unsubscribe();
}, 1000);
运行结果:
RxJS -- Subscription的更多相关文章
- RxJS之Subject主题 ( Angular环境 )
一 Subject主题 Subject是Observable的子类.- Subject是多播的,允许将值多播给多个观察者.普通的 Observable 是单播的. 在 Subject 的内部,subs ...
- RxJS - Subject(转)
Observer Pattern 观察者模式定义 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态 ...
- Angular 2.0 从0到1:Rx--隐藏在Angular 2.x中利剑
第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...
- 如何在AngularX 中 使用ngrx
ngrx 是 Angular框架的状态容器,提供可预测化的状态管理. 1.首先创建一个可路由访问的模块 这里命名为:DemopetModule. 包括文件:demopet.html.demopet.s ...
- Angular4 组件通讯方法大全
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
- ngRx 官方示例分析 - 4.pages
Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...
- 用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传
第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三 ...
- Angular4学习笔记(十)- 组件间通信
分类 父子组件通信 非父子组件通信 实现 父子 父子组件通信一般使用@Input和@Output即可实现,参考Angular4学习笔记(六)- Input和Output 通过Subject 代码如下: ...
- angular组件之间的通讯
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
随机推荐
- 笔记︱风控分类模型种类(决策、排序)比较与模型评估体系(ROC/gini/KS/lift)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 本笔记源于CDA-DSC课程,由常国珍老师主讲 ...
- Redis进阶实践之十五 Redis-cli命令行工具使用详解第二部分(结束)
一.介绍 今天继续redis-cli使用的介绍,上一篇文章写了一部分,写到第9个小节,今天就来完成第二部分.话不多说,开始我们今天的讲解.如果要想看第一篇文章,地址如下:http: ...
- 生物结构变异分析软件meerkat 0.189使用笔记(二)
一. 运行meerkat 前面已经依序安装了meerkat 的环境和meerkat,运行了预处理一步,在相对应的bam文件目录下生成了大批文件,因此,当要用meerkat处理某个bam文件时,应先将该 ...
- java中回调函数的理解
一,案例一 "通常大家说的回调函数一般就是按照别人(李四)的定好的接口规范写,等待别人(张三)调用的函数,在C语言中,回调函数通常通过函数指针来传递:在Java中,通常就是编写另外一个类或类 ...
- Linux之安全应用
一.关于iptables 定义:常见于linux系统下的应用层防火墙工具 二.Iptables规则原理和组成 1) Netfilter Netfilter是Linux操作系统核心层内部的一个数据包处理 ...
- 在TextBox中敲击回车执行ASP.NET后台事件
1.在TextBox中敲击回车执行ASP.NET后台事件 0.说明 页面中有一个用于搜索的TextBox,希望能在输入内容后直接回车开始搜索,而不是手动去点击它旁边的搜索按钮 但因为该TextBo ...
- ssm+maven多模块项目整合
我的项目一共会分为4个模块:entity.dao.service和web 一.创建父模块 填写GroupId与ArtifactId 填写项目名称和项目保存路径 因为是父模块所以src包可以删除 二.创 ...
- (luogu P3358)最长k可重区间集问题 [TPLY]
最长k可重区间集问题 题目链接 https://www.luogu.org/problemnew/show/3358 做法 所有点向下一个点连容量为k费用为0的边 l和r连容量为1费用为区间长度的边 ...
- 【POJ 3401】Asteroids
题面 Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x ...
- 浏览器兼容CSS渐进增强 VS 优雅降级如何选择
由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...