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 相关文章推荐
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
详解Angular.js中$http拦截器的介绍及使用
Jul 04 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
javascript常用方法总结
2015/05/14 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
详解vue-cli3使用
2018/08/14 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
vue 实现走马灯效果
2019/10/28 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
python 图像平移和旋转的实例
2019/01/10 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python3常用内置方法代码实例
2019/11/18 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
编程输出如下图形
2013/11/24 面试题
跟单文员岗位职责
2014/01/03 职场文书
管理失职检讨书
2014/02/12 职场文书
个人授权委托书范本
2014/04/03 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
婚前协议书
2014/04/15 职场文书
实验室的标语
2014/06/20 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers