RxJS在TypeScript中的简单使用详解


Posted in Javascript onApril 13, 2020

1. 安装

# 安装 typescript, rxjs 包
npm install -D typescript @types/node
npm install rxjs

2. 使用

2.1 使用 from 来从数组生成源

RxJS 有许多创建源的方法,如 from, fromEvent..., 这里使用 from做个例子

import {from} from 'rxjs'

// 从数组生成可订阅对象
// obser 的对象类型为 Observable
let obser = from([1,2,3,4,5])
// 消费对象
// next 当管道中有值流动,就会出发next
// 当发生错误是会触发 error
// 当循环完数组时,会调用complete
obse.subscribe({
  next(item) {
    console.log(item)
  },
  error(err) {
    console.log(err)
  },
  complete() {
    console.log("Done")
  }
}

2.2 自定义生成源

import {Observable, from} from 'rxjs'

// 新建一个可订阅对象
let obser = new Observable<string>(productor => {
  // 自定义数据流
  productor.next("hello")
  productor.next("world")
  setTimeout(()=>{
    productor.next("After 1 Sec")
    productor.complete()
  }, 1000)
})

// 消费
obse.subscribe({
  next(item) {
    console.log(item)
  },
  error(err) {
    console.log(err)
  },
  complete() {
    console.log("Done")
  }
}

3. 实际例子,使用 Redis

3.1 安装 Redis

npm install redis @types/redis

3.2 使用

import {RedisClient} from "redis"
import {Observable} from "rxjs"
// 连接redis, redisclient 的构造类型是”ClientOpt接口“,只要是符合其字段定义的对象就可以
let reids = new RedisClient({
  host:"localhost",
  port:6379
})
// redis的操作都是异步操作,通过回调使用,很容易陷入毁掉地狱
redis.set("name", "tom", (err, res)=>{
  // 需要在set成功后同步的操作
  if(!err) {
    redis.get("name", (err,res)=> {
      console.log(res)
    })
  }
})

// 可以使用 Promise 封装上面的方法,但我们这里使用 rxjs的事件流
let redisObser = new Observable(productor => {
// 这个列子没啥实际用途,只做演示
  redis.set("name", "jack", (err, res) => {
    productor.next(res)
    productor.complete()
  })
})
// 消费代码
obse.subscribe({
  next(key) {
    // 读取或其他需保证在 set 后的操作
    redis.get(key, (err, res) => {
      console.log(res)
    })
  },
  error(err) {
    console.log(err)
  },
  complete() {
    console.log("Query Finish")
  }
}

到此这篇关于RxJS在TypeScript中的简单使用详解的文章就介绍到这了,更多相关TypeScript使用RxJS内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
jquery队列函数用法实例
Dec 16 Javascript
javascript验证身份证号
Mar 03 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
js前端图片加载异常兜底方案
Jun 21 Javascript
JS错误处理与调试操作实例分析
Apr 13 #Javascript
JS正则表达式常见函数与用法小结
Apr 13 #Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 #Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 #Javascript
JavaScript创建表格的方法
Apr 13 #Javascript
JavaScript实现捕获鼠标坐标
Apr 12 #Javascript
jquery实现轮播图特效
Apr 12 #jQuery
You might like
PHP 源代码压缩小工具
2009/12/22 PHP
fgetcvs在linux的问题
2012/01/15 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
php实现用户登陆简单实例
2017/04/04 PHP
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
《我的第一本书》教学反思
2014/02/15 职场文书
人事部专员岗位职责
2014/03/04 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
银行催款通知书
2015/04/17 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
浅谈Python项目的服务器部署
2021/04/25 Python
java设计模式--七大原则详解
2021/07/21 Java/Android
Redis数据同步之redis shake的实现方法
2022/04/21 Redis