开发环境是使用 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. 数据对接—kettle使用之四

    上一篇介绍了表输出插件,并通过实例介绍插件的简单使用,如果有这样的需求大家可以参考一下并深入研究插件的其它细节设置.这一篇我们介绍和表输出对应的插件(表输入)的使用. 表输入: 1. 从步骤插入数据: ...

  2. 数据库同步相关的SQL语句

    一.目标: 本文重点给大家介绍几款SQL用法,一般常用于数据库同步之类的. 二.例子: 1.找出A表中不存在于B表的记录. from B where A.[序号]=B.[序号]); 2.将A表中不存在 ...

  3. 使用Json.Net解决MVC中各种json操作

    最近收集了几篇文章,用于替换MVC中各种json操作,微软mvc当然用自家的序列化,速度慢不说,还容易出问题,自定义性也太差,比如得特意解决循环引用的问题,比如datetime的序列化格式,比如性能. ...

  4. linux 新进程的创建

    慕课18原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.背景知识: 1. ...

  5. Android ART runtime简述

    此文章原始是PPT格式已转换为PDF,完整内容也能够下载文档阅读: AndroidARTruntimeOverview watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5 ...

  6. word2013总是出现未响应卡一下如何解决?

    最近在记笔记,word很烦很烦,总是会卡一下,过一会卡一下.本来以为是自动保存后来发现跟自动保存没有关系. 解决方法:禁用硬件图形加速就好了,不行的话再在硬件加速下面有个"使用子像素定位平滑 ...

  7. 单页面SPA应用路由原理 history hash

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. Android学习笔记五:四大组件(转)

    转自:http://blog.csdn.net/shenggaofei/article/details/52450668 Android四大组件分别为activity.service.content ...

  9. jquery 如何获取有多个class名的元素

      1.情景展示 如何使用jquery获取带有多个class样式的元素? 2.解决方案 $("p.opinion.mb15.gray2e.max2line.mr20:contains('大摩 ...

  10. 【Linux】文件夹及作用说明

    Tips Linux关机注意事项: 远程重启服务前,先停止相关服务 使用安全命令重启shutdown –r now,该命令在重启时会正常保存和终止服务器上正在运行的程序 不建议在本地直接对远程服务器关 ...