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 表单进行客户端验证demo
Aug 24 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
小程序使用分包的示例代码
Mar 23 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
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JavaScript多线程详解
2015/08/12 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
网络教育自我鉴定
2013/11/01 职场文书
销售文员的岗位职责
2013/11/20 职场文书
安全技术说明书
2014/05/09 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
作风建设年活动总结
2014/08/27 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
高中信息技术教学反思
2016/02/16 职场文书