rxjs简单的Observable用例
import React from 'react';
import { Observable } from 'rxjs'; const FlowPage = () => { const onSubscribe = observer => {
observer.next(1);
observer.next(2);
observer.next(3);
} // 创建一个发布者
// Observable是一个特殊类,它接受一个处理Observer的函数
// 而Observer就是一个普通的对象,
// 对于Observer对象要求:它必须包含一个名为next的属性(是一个函数)
// next用于接收被推过来的数据
const source$ = new Observable(onSubscribe); // 参数就是观察者对象
const theObserver = {
next : item => console.log(item)
} // 一个观察者调用Observable对象的subscribe函数
source$.subscribe(theObserver) return <h1>rxjs学习</h1>;
}; export default FlowPage;
跨越时间的Observable
// 推送数据可以有时间间隔。
const onSubscribe = observer => {
let number = 1;
const Timer = setInterval(()=>{
observer.next(number++)
if(number > 3){
clearInterval(Timer)
}
},1000)
}
永无止境的Observable
假如我们不中断这个程序,让它一直运行下去这个程序也不会消耗更多的内存。
Observable对象每次只吐出一个数据,然后这个数据就被Observer消化处理了,不会存在数据的堆积。
const onSubscribe = observer => {
let number = 1;
const Timer = setInterval(()=>{
observer.next(number++)
},1000)
}
Observable的完结
Observer时刻准备着接收数据,如果没有推送数据了,相关的资源不会被释放,为了让Observer明确知道这个数据流已经不会再有新的数据,
需要调用Observer的complete函数。
import React from 'react';
import { Observable } from 'rxjs'; const FlowPage = () => { // 推送数据可以有时间间隔。
const onSubscribe = observer => {
let number = 1;
const Timer = setInterval(()=>{
observer.next(number++)
if(number > 3){
clearInterval(Timer)
observer.complete();
}
},1000)
}
const source$ = new Observable(onSubscribe); const theObserver = {
next : item => console.log(item),
complete:()=> console.log(' no more data')
} source$.subscribe(theObserver) return <h1>rxjs学习</h1>;
}; export default FlowPage;
observable的错误处理
// 一旦进入出错状态,observable就终结了,就不会再调用后面的next()和complete()
// 调用了complete()函数终结,也不能再调用next()和error()
const onSubscribe = observer => {
observer.next(1);
observer.error('something wrong!')
observer.complete()
}
const source$ = new Observable(onSubscribe); const theObserver = {
next : item => console.log(item),
error: err => console.log(err),
complete:()=> console.log(' no more data')
} source$.subscribe(theObserver)
Observable简洁形式
// 为了让代码更加简洁,没有必要创建一个参数对象。
// subscribe也可以直接接受函数作为参数,
// 第一个参数如果是函数类型,就会被认为是next
// 第二参数被认为是error
// 第三个参数complete
source$.subscribe(
item => console.log(item),
err => console.log(err),
()=> console.log(' no more data')
)
Observable退订
// 返回一个对象,并且对象包含了unsubscribe函数,表示退订
const onSubscribe = observer => {
let number = 1;
const Timer = setInterval(()=>{
observer.next(number++)
},1000)
return {
unsubscribe:()=>{
clearInterval(Timer)
}
}
}
const source$ = new Observable(onSubscribe); // subscribe函数的返回结果存为变量subscription
const subscription = source$.subscribe(
item => console.log(item),
err => console.log(err),
()=> console.log(' no more data')
) // 3.5s后调用退订
// 3.5s后不再接受到被推送的数据,但是Observable的source$资源并没有终结
// 因为始终没有调用complete,只不过再也不会调用next函数了
setTimeout(()=>{
subscription.unsubscribe()
},3500)
修改以下代码,便于观察
// 返回一个对象,并且对象包含了unsubscribe函数,表示退订
const onSubscribe = observer => {
let number = 1;
const Timer = setInterval(()=>{
console.log('in onSUbscribe ',number)
observer.next(number++)
},1000)
return {
unsubscribe:()=>{
// clearInterval(Timer)
}
}
}
执行结果如下:
由此可见,Observable对象source$在退订以后依然在不断调用next函数,
但是已经断开了source$对象和Observer的连接。
所以onSubscribe中如何调用next,observer都不会做出任何响应
rxjs简单的Observable用例的更多相关文章
- SSM-MyBatis-01:IDEA的安装,永久注册和简单的MyBatis用例
一,IDEA的安装和永久注册 1.安装: 那到安装包,下一步,选路径,上面可以选操作系统64/32位,下面是程序的默认打开方式,可以不必勾选,也可以全选 路径一定不包含中文,重点 2.永久注册: 将此 ...
- Oracle简单脚本演示样例
Oracle简单脚本演示样例 1.添加表 --改动日期:2014.09.21 --改动人:易小群 --改动内容:新增採购支付情况表 DECLARE VC_STR VARCHAR2( ...
- rxjs简单入门
rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据.状态.事件等等转成可被观察的序列(Obser ...
- rxjs 简单的demo
开发环境是使用 create-react-app 创建的.再使用 $ cnpm install rxjs 来安装即可开始. $ npx create-react-app my-app $ cd my- ...
- Appium+python的一个简单完整的用例
最近一直在忙,终于有时间来整理一下,传一个简单的用例,运行之后可以看到用例的报告,希望对大家有帮助. HTMLTestRunner这个包网上有很多,大家可以自己下载. 1 import unittes ...
- C#中的简单工厂和单例
下面首先来说说简单工厂 举个例子: 首先是父类 public abstract class Pizza { public abstract string Info(); } } 子类 public c ...
- 从一个简单的Java单例示例谈谈并发
一个简单的单例示例 单例模式可能是大家经常接触和使用的一个设计模式,你可能会这么写 public class UnsafeLazyInitiallization { private static Un ...
- [Javascript + rxjs] Introducing the Observable
In this lesson we will get introduced to the Observable type. An Observable is a collection that arr ...
- 从一个简单的Java单例示例谈谈并发 JMM JUC
原文: http://www.open-open.com/lib/view/open1462871898428.html 一个简单的单例示例 单例模式可能是大家经常接触和使用的一个设计模式,你可能会这 ...
随机推荐
- STM32 调试 24L01 心得
大部分使用STM32开发nrf24L01的用户基本都是照搬常见的几个开发板的源代码,在这里我做一些总结: 1.源代码中在while(1)的循环中有 NRF24L01_TX_Mode();或NRF24L ...
- oracle11g和12c区别
11g和12c 1.12c使用更为强大的sql执行与优化算法 2.oracle在12c完全使用云和可插拔数据库概念 3.oracle 12c的RAC使用flex(让rg直接化) 模式,让rg管理更加细 ...
- Perl Tk在IC设计中的应用、Windows、Linux平台下的安装-各种错误的摸索解决
本文转自:自己的微信公众号<集成电路设计及EDA教程> <Perl Tk在IC设计中的应用.Windows.Linux平台下的安装-各种错误的摸索解决> Perl在IC设计中有 ...
- 51nod 1133 不重叠的线段 (贪心,序列上的区间问题)
题意: 最多能选几条不重叠的线段 思路: 按R从小到大排序,维护一个最大的右端点 右端点最小的那个线段是必选的,可以贪心地证明 代码: #include<iostream> #includ ...
- lua学习之表达式篇
表达式 表达式用于表达值 lua 中表达式可以为数字常量,自变字符串,变量,一元和二元操作符,函数调用.函数定义.table 构造式 算数操作符 一元操作符 -负号 二元操作符 -减号 / ^ % x ...
- Linux系统之网络文件共享与数据实时同步实践
1.实现基于MYSQL验证的vsftpd虚拟用户访问 首先环境说明,数据库服务器是192.168.0.10,vsftpd服务器是192.168.0.30 1)安装vsftpd [root@test-c ...
- num05---装饰模式
当系统需要新的功能的时候,一般都是向旧的类中添加新的代码.比如一个人这个类,需要新增穿衣的功能,那么就会在人这个类中去添加对应的穿衣方法代码,用来增强人这个类的行为功能.但是这样做,会因为新加入的字段 ...
- python笔记21(面向对象课程三)
今日内容 嵌套 特殊方法:__init__ type/isinstance/issubclass/super 异常处理 内容回顾 def login(): pass login() class Acc ...
- 文件传输协议-FTP
一.FTP概述 FTP(File Transfer Protocol 文件传输协议)C/S结构的应用层协议.由服务端和客户端两个部分共同实现文件传输功能 FTP服务器普遍部署于内网中,具有容易部署.方 ...
- jenkins SSH发布文件 Publish over SSH
jenkins 构建完成后需要一键发布,结构如下 A服务器 svn B服务器 jenkins C服务器 应用服务器 B从A拉取代码后打包成war,然后向C服务器拷贝war包 这里解决的就是远程拷贝问题 ...