rxjs 简单的demo
开发环境是使用 create-react-app 创建的。再使用 $ cnpm install rxjs 来安装即可开始。
$ npx create-react-app my-app
$ cd my-app
$ cnpm install rxjs
$ npm start
my-app/src/index.js
//////////////////////////////////////////////
// demo1:入门
//////////////////////////////////////////////
// import { of } from 'rxjs'
// const source$ = of(1, 2, 3)
// source$.subscribe(console.log) //////////////////////////////////////////////
// demo2: next
//////////////////////////////////////////////
// import {Observable} from 'rxjs'
// const source$ = new Observable(observer => {
// observer.next(1)
// observer.next(2)
// observer.next(3)
// })
// source$.subscribe({
// next: item => console.log(item)
// }) //////////////////////////////////////////////
// demo3: 延迟next
//////////////////////////////////////////////
// import {Observable} from 'rxjs'
// const source$ = new Observable(observer => {
// let number = 1
// const handle = setInterval(() => {
// observer.next(number++)
// if (number > 3) {
// clearInterval(handle)
// }
// }, 1000)
// })
// source$.subscribe({
// next: item => console.log(item)
// }) //////////////////////////////////////////////
// demo4: complete
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
// let number = 1
// const handle = setInterval(() => {
// observer.next(number++)
// if (number > 3) {
// clearInterval(handle)
// observer.complete()
// }
// }, 1000)
// })
// source$.subscribe({
// next: item => console.log(item),
// complete: () => console.log('No More Data')
// }) //////////////////////////////////////////////
// demo5: error
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
// observer.next(1)
// observer.error('Someting Wrong')
// observer.complete()
// })
// source$.subscribe({
// next: item => console.log(item),
// error: err => console.log(err),
// complete: () => console.log('No More Data'),
// }) //////////////////////////////////////////////
// demo6: Observable简单形式(next、error、complete)
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
// observer.next(1)
// observer.error('Someting Wrong')
// observer.complete()
// })
// source$.subscribe(
// // next
// item => console.log(item),
// // error,如果不关心错误处理,该参数可以用null占位:source$.subscribe(item => console.log(item), null, complete: () => console.log('No More Data') )
// err => console.log(err),
// // complete
// () => console.log('No More Data'),
// ) //////////////////////////////////////////////
// demo7: 退订Observable
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
// let number = 1
// const handle = setInterval(() => {
// console.log('in onSubscribe ', number)
// // 当退订之后,Observer不会造成任何响应,哪怕本程序依然在执行。
// observer.next(number++)
// }, 1000)
// return {
// // 退订的回调函数
// unsubscribe: () => {
// // clearInterval(handle)
// }
// }
// })
// const subscription = source$.subscribe(item => console.log(item))
// setTimeout(() => {
// subscription.unsubscribe()
// }, 3000) //////////////////////////////////////////////
// demo8: (流)管道 与 map操作符
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// import { map } from 'rxjs/operators'
// const source$ = Observable.create(observer => {
// observer.next(1)
// observer.next(2)
// observer.next(3)
// })
// source$.pipe(map(x => x * x)).subscribe(console.log) //////////////////////////////////////////////
// demo9: range 指定范围生成数据
//////////////////////////////////////////////
// import { range } from 'rxjs'
// const source$ = range(1, 100)
// source$.subscribe(console.log) //////////////////////////////////////////////
// demo10: generate 循环创建
//////////////////////////////////////////////
// import { generate } from 'rxjs'
// const source$ = generate(
// 2, // 初始值,相当于for循环中的i=2
// value => value < 10, //继续的条件,相当于for中的条件判断
// value => value + 2, //每次值的递增
// value => value * value // 产⽣的结果: 4 16 36 64
// )
// source$.subscribe(console.log) //////////////////////////////////////////////
// demo10: interval 与 take
//////////////////////////////////////////////
// import { interval } from 'rxjs'
// import { take, map } from 'rxjs/operators'
// 每一秒吐出从0开始的索引
// const source$ = interval(1000)
// const result$ = source$.pipe(map(x => x + 1), take(4))
// result$.subscribe(console.log) //////////////////////////////////////////////
// demo10: timer 与 take
//////////////////////////////////////////////
// import { timer } from 'rxjs'
// import { take } from 'rxjs/operators'
// // 3秒之后,每个1秒吐出(从0开始)
// const numbers$ = timer(3000, 1000)
// numbers$.pipe(take(4)).subscribe(x => console.log(x)) //////////////////////////////////////////////
// demo11: from 可把⼀切转化为Observable
//////////////////////////////////////////////
// import { from } from 'rxjs'
// const source$ = from([1, 2, 3])
// source$.subscribe(console.log) //////////////////////////////////////////////
// demo12: fromPromise 异步处理的交接
//////////////////////////////////////////////
// import { from } from 'rxjs'
// const promise = Promise.resolve('good')
// // const promise = Promise.reject('oops')
// const source$ = from(promise)
// source$.subscribe(
// console.log, // good
// error => console.log('catch', error), // 如果解释reject则会输出 oops
// () => console.log('complete') // complete
// ) ////////////////////////////////////////////////////////////
// demo13: fromEvent 把DOM中的事件转化为Observable对象中的数据
// <button id="button">button</button>
// <div id="text"></div>
////////////////////////////////////////////////////////////
// import { fromEvent } from 'rxjs'
// let clickCount = 0
// const event$ = fromEvent(document.querySelector('#button'), 'click')
// event$.subscribe(
// () => {
// document.querySelector('#text').innerText = ++clickCount
// }
// ) //////////////////////////////////////////////
// demo13: fromEventPattern 接受两个函数参数,分别对应产⽣的Observable对象, 被订阅和退订时的动作
//////////////////////////////////////////////
// import { fromEventPattern } from 'rxjs'
// import EventEmitter from 'events'
// const emitter = new EventEmitter()
// const addHandler = (handler) => {
// emitter.addListener('msg', handler)
// }
// const removeHandler = (handler) => {
// emitter.removeListener('msg', handler)
// }
// const source$ = fromEventPattern(addHandler, removeHandler)
// const subscription = source$.subscribe(
// console.log,
// error => console.log('catch', error),
// () => console.log('complete')
// )
// emitter.emit('msg', 'hello')
// emitter.emit('msg', 'world')
// subscription.unsubscribe()
// // 由于退订时触发的removeHandler,删除了订阅,所以输出不了fuck
// emitter.emit('msg', 'fuck') //////////////////////////////////////////////
// demo14: ajax
// <button id="button">button</button>
// <div id="text"></div>
//////////////////////////////////////////////
// import { fromEvent } from 'rxjs'
// import { ajax } from 'rxjs/ajax'
// fromEvent(document.querySelector('#button'), 'click').subscribe(() => {
// ajax('https://api.github.com/repos/ReactiveX/rxjs', {responseType: 'json'}).subscribe(value => {
// const starCount = value.response.stargazers_count
// document.querySelector('#text').innerText = starCount
// })
// }) //////////////////////////////////////////////
// demo15: repeatWhen 重复订阅
//////////////////////////////////////////////
// import { of } from 'rxjs'
// import { repeatWhen, delay } from 'rxjs/operators'
// const source$ = of(1, 2, 3)
// const notifier = (notification$) => {
// return notification$.pipe(delay(2000))
// }
// const repeated$ = source$.pipe(repeatWhen(notifier))
// repeated$.subscribe(console.log) //////////////////////////////////////////////
// demo16: concat 合并流(首尾合并)
//////////////////////////////////////////////
// import { of, concat } from 'rxjs'
// // import { concat } from 'rxjs/operators' // source1$.pipe(concat(source2$))
// const source1$ = of(1, 2, 3)
// const source2$ = of(4, 5, 6)
// const concated$ = concat(source1$, source2$)
// concated$.subscribe(console.log) //////////////////////////////////////////////
// demo17: merge 合并流(先到先得)
//////////////////////////////////////////////
// import { timer, merge } from 'rxjs'
// import { map } from 'rxjs/operators'
// const source1$ = timer(0, 1000).pipe(map(x => x + 'A'))
// const source2$ = timer(500, 1000).pipe(map(x => x + 'B'))
// const merged$= merge(source1$, source2$)
// merged$.subscribe(
// console.log,
// null,
// () => console.log('complete')
// ) //////////////////////////////////////////////
// demo18: merge 同步限流
//////////////////////////////////////////////
// import { timer, merge } from 'rxjs'
// import { map } from 'rxjs/operators'
// const source1$ = timer(0, 1000).pipe(map(x => x+'A'))
// const source2$ = timer(500, 1000).pipe(map(x => x+'B'))
// const source3$ = timer(1000, 1000).pipe(map(x => x+'C'))
// // 其中source3$永远不会有进入merged$的机会,因为我限制了最多只合并2个。
// const merged$ = merge(source1$, source2$, source3$, 2)
// merged$.subscribe(
// console.log,
// null,
// () => console.log('complete')
// ) //////////////////////////////////////////////
// demo18: merge 合并事件(同时触发click和touchend)
//////////////////////////////////////////////
// import { merge, fromEvent } from 'rxjs'
// const element = document.getElementById('button')
// const click$ = fromEvent(element, 'click')
// const touchend$ = fromEvent(element, 'touchend')
// merge(click$, touchend$).subscribe(console.log) //////////////////////////////////////////////
// demo19: zip 神奇的拉链合并(像拉链⼀样做到⼀对⼀咬合)
//////////////////////////////////////////////
// import { of, zip } from 'rxjs'
// const source1$ = of(1, 2, 3);
// const source2$ = of('a', 'b', 'c');
// const zipped$ = zip(source1$, source2$);
// // (2) [1, "a"]
// // (2) [2, "b"]
// // (2) [3, "c"]
// zipped$.subscribe(
// console.log,
// null,
// () => console.log('complete')
// ); //////////////////////////////////////////////
// demo20: combineLatest 合并最后⼀个数据 (较难理解,但理解之后非常牛逼有趣)
//////////////////////////////////////////////
// import { timer, combineLatest } from 'rxjs'
// const source1$ = timer(500, 1000);
// const source2$ = timer(1000, 1000);
// const result$ = combineLatest(source1$, source2$);
// // (2) [0, 0]
// // (2) [1, 0]
// // (2) [1, 1]
// // (2) [2, 1]
// // (2) [2, 2]
// // (2) [3, 2]
// // (2) [3, 3]
// // (2) [4, 3]
// result$.subscribe(
// console.log,
// null,
// () => console.log('complete')
// );
rxjs 简单的demo的更多相关文章
- C#可扩展编程之MEF学习笔记(一):MEF简介及简单的Demo
在文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门致力于解决扩展性问题的框架 ...
- Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(二)
然后是项目下的文件:完整的项目请看 上一篇 Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(一) 项目下的springmvc-servlet.xml配置文件: ...
- MEF简介及简单的Demo
MEF简介及简单的Demo 文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门 ...
- Spring源码学习:第1步--在Spring源码中添加最简单的Demo代码
为了最大程度地贴近Spring源码并进行学习,一种比较直接的做法是:直接在Spring源码中加入Demo代码,并进行调试. 参照以前使用Spring的经验,Spring最简单的使用方法是:一个实体类. ...
- Dubbo入门—搭建一个最简单的Demo框架
一.Dubbo背景和简介 1.电商系统的演进 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. a.单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一 ...
- Dubbo入门---搭建一个最简单的Demo框架(转)
Dubbo背景和简介 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. 单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一起,以减少部署节点和成本. ...
- Dubbo简介---搭建一个最简单的Demo框架
Dubbo背景和简介 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. 单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一起,以减少部署节点和成本. ...
- [MyBean说明书]-如何进行最简单的DEMO
MyBean是轻量级的.绿色的框架,不需要安装任何的组件和携带任何的其他文件,前 期步骤已经相当精简了,仔细阅读完下面简单的五个步骤,就可以编写基于MyBean的插件: 1.加入Delphi的搜索路径 ...
- Python实例---简单购物车Demo
简单购物车Demo # version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 product_list = ( ['Java ...
随机推荐
- 【树莓派】在树莓派的Android系统中安装APK应用
树莓派3 Android TV安装APK应用教程 本文摘自:http://www.mz6.net/news/android/6867.html 树莓派3 Android TV怎样安装软件?对于熟悉AD ...
- 共享权限ACL列表出现SID现象
http://www.minasi.com/forum/topic.asp?TOPIC_ID=16842 Basically here's what happens, and why it doesn ...
- 使用树莓派3获取CPU温度
一.命令: cat /sys/class/thermal/thermal_zone0/temp 二.上图:
- Hotmail Smtp邮箱发送的端口
1.最近有项目需求做监控报警. 2.使用Smtp发邮件时,网上找了一大堆,Smtp服务是:smtp.live.com 端口是:25或587,试了好多次都不行.原来端口是465. 3.发送时,我启用 ...
- markdown 常用语法格式
1.示例1 http://mahua.jser.me/ 2.示例2 https://www.zybuluo.com/mdeditor?url=https%3A%2F%2Fwww.zybuluo.com ...
- Oracle NET工作原理、配置及连接问题排查
一.Oracle NET配置文件 Oracle NET是一个软件层,支持不同网络协议之间的转换.不同的物理机器可以借助这个软件层实现相互间的通信,具体而言就是实现对oracle的远程访问. oracl ...
- 转:Bullet物理引擎不完全指南(Bullet Physics Engine not complete Guide)
write by 九天雁翎(JTianLing) -- blog.csdn.net/vagrxie 讨论新闻组及文件 前言 Bullet据称为游戏世界占有率为第三的物理引擎,也是前几大引擎目前唯一能够 ...
- 8、java5线程池之动态缓存线程池newCachedThreadPool
JDK文档描述 创建一个可根据需要创建新线程的线程池,但是在以前构造的线程可用时将重用它们.对于执行很多短期异步任务的程序而言,这些线程池通常可提高程序性能.调用 execute 将重用以前构造的线程 ...
- loadrunner error 27796 Failed to connect to server
(2012-10-23 01:23:17) 转载▼ Action.c(58): Error -27796: Failed to connect to server "www.baidu. ...
- 用@resource注解方式完成属性装配
注入依赖对象可以采用手工装配或自动装配,在实际应用中建议使用手工装配,因为自动装配会产生未知情况,开发人员无法预见最终的装配结果. 1 需要修改xml文件的以下信息. 加入下列红色部分的4行 & ...