RxJS -- Subscription
时间:2022-05-06
本文章向大家介绍RxJS -- Subscription,主要内容包括Subscription是什么?、第一个例子:、毁灭函数、retry, retryWhen的原理、操作多个Subscriptions、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
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);
运行结果:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Mybatis源码学习第六天(核心流程分析)之Executor分析
- EasyPoi导出Excel
- 盘点 15 个好用的 API 接口管理神器
- JVM学习第二天(垃圾回收器和内存分配策略)大章
- JVM学习第一天(虚拟机的前世今生与与Java的内存区域)
- Android进阶:Binder那么弱怎么面大厂?
- Mybatis源码学习第七天(PageHelper分析)
- 【小程序】728- 小程序如何生成海报分享朋友圈
- Mybatis源码学习第七天(插件源码分析)
- Mybatis源码学习第七天(插件开发原理)
- Mybatis源码学习第六天(核心流程分析)之Executor分析(补充)
- 无法用排他锁锁定该数据库,以执行该操作。 (Microsoft SQL Server,错误: 5030)
- Spring security OAuth2.0认证授权学习第四天(SpringBoot集成)
- php hash算法类
- Spring security OAuth2.0认证授权学习第三天(认证流程)