RxJS在TypeScript中的简单使用详解

 更新时间:2020年04月13日 14:58:40   作者:rainsay  
这篇文章主要介绍了RxJS在TypeScript中的简单使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现自动变换的菜单效果代码

    JS实现自动变换的菜单效果代码

    这篇文章主要介绍了JS实现自动变换的菜单效果代码,可实现自动变换菜单选中项的技巧,涉及JavaScript定时函数触发页面样式属性变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JS异步的执行顺序分析

    JS异步的执行顺序分析

    这篇文章介绍了JS异步的执行顺序,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 如何使用JavaScript策略模式校验表单

    如何使用JavaScript策略模式校验表单

    这篇文章主要介绍了使用JavaScript策略模式校验表单,对JS策略模式感兴趣得同学,可以参考下
    2021-04-04
  • JavaScript实现图片上传并预览并提交ajax

    JavaScript实现图片上传并预览并提交ajax

    这篇文章主要为大家详细介绍了JavaScript实现图片上传并预览并提交ajax,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Javascript和Ajax中文乱码吐血版解决方案

    Javascript和Ajax中文乱码吐血版解决方案

    一般来说中文乱码用js结合escape来解决,但下面的方法是一般后台中的一些问题,需要注意下输出顺序,先声明编码类型在输出内容是个好习惯。
    2009-12-12
  • js中的for如何实现foreach中的遍历

    js中的for如何实现foreach中的遍历

    js中没有foreach这个关键字,但是可以用var v in array来实现遍历,下面有个不错的示例,大家可以参考下
    2014-05-05
  • 小程序中实现获取全部数据的图文教程

    小程序中实现获取全部数据的图文教程

    最近在开发中遇到了一个需求,需要获取小程序的全部数据,所以这篇文章主要给大家介绍了关于小程序中实现获取全部数据的相关资料,需要的朋友可以参考下
    2022-11-11
  • 一起来了解下Swiper插件的使用和介绍

    一起来了解下Swiper插件的使用和介绍

    这篇文章主要为大家详细了解了Swiper插件的使用和介绍,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • JavaScript 替换Html标签实现代码

    JavaScript 替换Html标签实现代码

    这种技术被广泛应用于表单验证,语法高亮和危险字符过滤中。一段话如果很长,如果不想像下面那样替换,我们得想些办法了。
    2009-10-10
  • 实例解析Array和String方法

    实例解析Array和String方法

    本文主要对Array和String方法进行总结,每一部分总结后有实例代码,代码中黄色框方法不改变原数组。PS:所有实例结果均一一运行所得。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12

最新评论