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

赞 (0)

相关推荐

  • 使用RxJS更优雅地进行定时请求详析

    使用RxJS更优雅地进行定时请求详析

    在用 Angular 做项目的时候,遇到了一个有点麻烦的问题.具体问题如下: 轮循请求某个接口,如何保证接口返回的数据与请求的顺序相同? 实际的业务场景是这样的:前端需要轮循请求后端接口获取文件处理进度,并在前端用进度条展示.如下方所示: 首先想到的肯定是使用 setTimeout 或者 setInterval 进行定时请求.然而结果有点诡异,进度条的变化不是递增,而是有快有慢,比如 30%,20%,50%,40%这样.仔细一想也知道问题出在哪,异步请求的结果并不是按顺序返回的. 我在之前的工作

  • Angular搜索场景中使用rxjs的操作符处理思路

    在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的.节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装.rxjs提供了各种操作符 , 可以很快捷高效的实现这些功能. 栗子 现在有一个查询场景,可以通过城市.类型.关键字来多维度过滤结果,如下图: 处理思路: 1.通过ngModel将select和input的值绑定到模型中的过滤条件对象 2.监听select输入框的change事件和input输入框的input事件来触发 发

  • 学习RxJS之JavaScript框架Cycle.js

    是什么 Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简称HCI): 函数式 Cycle.js 把应用程序抽象成一个纯函数 main(),从外部世界读取副作用(sources),然后产生输出(sinks) 传递到外部世界,在那形成副作用.这些外部世界的副作用,做为Cycle.js的插件存在(drivers),它们负责:处理DOM.提供HTTP访问等. 响应式 Cycle.js 使用 rx.js 来实现关注分离,这意

  • 详细介绍RxJS在Angular中的应用

    RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程:可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控.更简单. 而今就是要探讨什么是Observable.observer.operator.Submit.EventEmmit,以及如何去使用它们. 什么是Observable? Observable只是一个普通函数,要想让他有所作为,就需要跟observer一起使用:前者是受后者是攻.而这个observer(后面我们会介绍)只是一个带有 next.er

  • 如何用RxJS实现Redux Form

    如何用RxJS实现Redux Form

    写在前面的话 看这篇文章之前,你需要掌握的知识: React RxJS (至少需要知道 Subject 是什么) 背景 form 可以说是 web 开发中的最大的难题之一.跟普通的组件相比,form 具有以下几个特点: 1.更多的用户交互. 这意味着可能需要大量的自定义组件,比如 DataPicker,Upload,AutoComplete 等等. 3.频繁的状态改变. 每当用户输入一个值,都可能会对应用状态造成改变,从而需要更新表单元素或者显示错误信息. 3.表单校验,也就是对用户输入数据的有

  • RxJS的入门指引和初步应用

    前言 RxJS是一个强大的Reactive编程库,提供了强大的数据流组合与控制能力,但是其学习门槛一直很高,本次分享期望从一些特别的角度解读它在业务中的使用,而不是从API角度去讲解. RxJS简介 通常,对RxJS的解释会是这么一些东西,我们来分别看看它们的含义是什么. Reactive Lodash for events Observable Stream-based 什么是Reactive呢,一个比较直观的对比是这样的: 比如说,abc三个变量之间存在加法关系: a = b + c 在传统

  • 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

  • Pytorch在NLP中的简单应用详解

    因为之前在项目中一直使用Tensorflow,最近需要处理NLP问题,对Pytorch框架还比较陌生,所以特地再学习一下pytorch在自然语言处理问题中的简单使用,这里做一个记录. 一.Pytorch基础 首先,第一步是导入pytorch的一系列包 import torch import torch.autograd as autograd #Autograd为Tensor所有操作提供自动求导方法 import torch.nn as nn import torch.nn.functional

  • TypeScript中的方法重载详解

    TypeScript中的方法重载详解

    前言 方法重载(overload)在传统的静态类型语言中是很常见的.JavaScript 作为动态语言, 是没有重载这一说的.一是它的参数没有类型的区分,二是对参数个数也没有检查.虽然语言层面无法自动进行重载,但借助其动态的特性,我们可以在代码中手动检查入参的类型,或者通过 arguments 获取到参数个数,从而实现根据不同的入参做不同的操作. 比如有一个获取聊天消息的方法,根据传入的参数从数组中查找数据.如果入参为数字,则认为是 id,然后从数据源中找对应 id 的数据并返回,否则当成类型,

  • JavaScript/TypeScript中==和===的区别详解

    JavaScript/TypeScript中==和===的区别详解

    在JS/TS项目里,除了能看到==操作符来判断两个变量是否相等外,我们还会看到===操作符,这两者有什么区别吗? 先上结论, 对于String, number这些基础类型,==操作符会先把两边的变量进行类型强制转换成相同的类型再比较是否相等:===操作符则不会进行类型转换,而是直接进行比较. 对于array, object这些高级类型,==和 ===是没有区别的,因为它们比较的是 “指针地址” . 对于基础类型和高级类型,== 和 ===是有区别的:==操作符会先把高级类型转换为基础类型之后,进

  • Python 中 Virtualenv 和 pip 的简单用法详解

    本文介绍了Python 中 Virtualenv 和 pip 的简单用法详解,分享给大家,具体如下: 0X00 安装环境 我们在 Python 开发和学习过程中需要用到各种库,然后在各个不同的项目和作品里可能用的版本还不一样,正因为有这种问题的存在才催生了virtualenv的诞生.virtualenv 可以在电脑上创建一个虚拟环境,可以针对每一个项目创建一个虚拟环境,这样就不用担心各个不同的项目用不同版本的库的时候出现的冲突了. 下面的内容只适用于 Linux/OSX,未经 Windows 环

  • 对python多线程中互斥锁Threading.Lock的简单应用详解

    一.线程共享进程资源 每个线程互相独立,相互之间没有任何关系,但是在同一个进程中的资源,线程是共享的,如果不进行资源的合理分配,对数据造成破坏,使得线程运行的结果不可预期.这种现象称为"线程不安全". 实例如下: #-*- coding: utf-8 -*- import threading import time def test_xc(): f = open("test.txt","a") f.write("test_dxc&quo

  • 对django中foreignkey的简单使用详解

    公司里很多部门,每个部门可以发多条信息,但每条信息只对应一个部门 部门类: class Dep(models.Model): name = models.CharField('小组名称',primary_key=True, blank=True, null=False, max_length =200) def __str__(self): return self.name 信息类: class Main(models.Model): dep = models.ForeignKey(Dep,ve

  • python中yield的用法详解——最简单，最清晰的解释

    首先我要吐槽一下,看程序的过程中遇见了yield这个关键字,然后百度的时候,发现没有一个能简单的让我懂的,讲起来真TM的都是头头是道,什么参数,什么传递的,还口口声声说自己的教程是最简单的,最浅显易懂的,我就想问没有有考虑过读者的感受. 接下来是正题: 首先,如果你还没有对yield有个初步分认识,那么你先把yield看做"return",这个是直观的,它首先是个return,普通的return是什么意思,就是在程序中返回某个值,返回之后程序就不再往下运行了.看做return之后再把它

  • Java中lombok的@Builder注解的解析与简单使用详解

    Lombok中@Builder用法 1.建造者模式简介:Builder 使用创建者模式又叫建造者模式.简单来说,就是一步步创建一个对象,它对用户屏蔽了里面构建的细节,但却可以精细地控制对象的构造过程. 2.注解类Builder.java注释: * The builder annotation creates a so-called 'builder' aspect to the class that is annotated or the class  * that contains a mem

  • Python中的tkinter库简单案例详解

    目录 案例一 Label & Button 标签和按钮 案例二 Entry & Text 输入和文本框 案例三 Listbox 部件 案例四 Radiobutton 选择按钮 案例五 Scale 尺度 案例六 Checkbutton 勾选项 案例七 Canvas 画布 案例八 Menubar 菜单 案例九 Frame 框架 案例十 messagebox 弹窗 案例十一 pack grid place 放置 登录窗口 TKinterPython 的 GUI 库非常多,之所以选择 Tkinte

随机推荐