开发环境是使用 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的更多相关文章

  1. C#可扩展编程之MEF学习笔记(一):MEF简介及简单的Demo

    在文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门致力于解决扩展性问题的框架 ...

  2. Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(二)

    然后是项目下的文件:完整的项目请看  上一篇 Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(一) 项目下的springmvc-servlet.xml配置文件: ...

  3. MEF简介及简单的Demo

    MEF简介及简单的Demo 文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门 ...

  4. Spring源码学习:第1步--在Spring源码中添加最简单的Demo代码

    为了最大程度地贴近Spring源码并进行学习,一种比较直接的做法是:直接在Spring源码中加入Demo代码,并进行调试. 参照以前使用Spring的经验,Spring最简单的使用方法是:一个实体类. ...

  5. Dubbo入门—搭建一个最简单的Demo框架

    一.Dubbo背景和简介 1.电商系统的演进 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. a.单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一 ...

  6. Dubbo入门---搭建一个最简单的Demo框架(转)

    Dubbo背景和简介 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. 单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一起,以减少部署节点和成本.  ...

  7. Dubbo简介---搭建一个最简单的Demo框架

    Dubbo背景和简介 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. 单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一起,以减少部署节点和成本.  ...

  8. [MyBean说明书]-如何进行最简单的DEMO

    MyBean是轻量级的.绿色的框架,不需要安装任何的组件和携带任何的其他文件,前 期步骤已经相当精简了,仔细阅读完下面简单的五个步骤,就可以编写基于MyBean的插件: 1.加入Delphi的搜索路径 ...

  9. Python实例---简单购物车Demo

    简单购物车Demo # version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 product_list = ( ['Java ...

随机推荐

  1. tornado url配置

    Note tornado是支持虚拟主机的,在同一端口上根据域名区分app http://www.tornadoweb.org/en/stable/web.html#application-config ...

  2. Angularjs乱记

    http://www.cnblogs.com/floor/p/6652313.html 在指令中使用filter DI规则 AngularJS注入规则 数据绑定 http://www.cnblogs. ...

  3. Java 时区之间时间转换

    SimpleDateFormat foo = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); System.out.println(&qu ...

  4. 8个很实用的在线工具来提高你的Web设计和开发能力

    近期在网上看到一张帖子感觉不错.只是是英文版的今天闲着没事锻炼一下英语能力分享给大家看看! 原文地址:http://webdesignledger.com/tools/8-useful-online- ...

  5. cocos2d-js Shader系列2:在cc.Sprite上使用Shader(黑白、灰度、造旧效果)

    在Sprite中使用Shader做特殊的颜色处理比较简单,只需要把Shader程序绑定到Sprite上即可: sprite.shaderProgram = alphaTestShader; Cocos ...

  6. OdiSendMail

    在Package中使用ODI自带的发送邮件OdiSendMail,生成的场景迁移到正式环境中,提示 javax.mail.AuthenticationFailedException: failed t ...

  7. java 获取class文件所在路径

      java 获取class文件所在路径 CreateTime--2017年11月14日15:14:32 Author:Marydon 1.获取class文件所在路径(磁盘路径.绝对路径) // 获取 ...

  8. Knockout学习之监控数组

    监控数组 单个监控属性.组合属性虽然可以解决大部分的问题,但是还有很多是他们无法做到的,比如在一组数据中进行移除添加,所以这节我们将要学习监控数组. 由于监控属性是由ko的observable构造,那 ...

  9. group by 分组

    group by 分组:一般情况下group需与统计函数(聚合函数)一起使用才有意义 mysql中的五种统计函数: ()max:求最大值 select max(goods_price) from go ...

  10. 转 Linux定时执行任务命令at和crontab

    本文介绍在Linux下的两种定时执行任务的方法:at命令,以及crontab服务. (1)at命令 假如我们只是想要让特定任务运行一次,那么,这时候就要用到at监控程序了. 设置at命令很简单,指示定 ...