小满nestjs（第十五章 nestjs 和 RxJs）

2023-04-15 145

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： nterval 五百毫秒执行一次 pipe 就是管道的意思管道里面也是可以去掉接口的支持处理异步数据去处理数据这儿展示了 map 和 filter 跟数组的方法是一样的最后通过观察者 subscribe 接受回调

为什么要介绍RxJs 应为在 Nestjs 已经内置了 RxJs 无需安装并且Nestjs 也会有一些基于Rxjs提供的API

Rxjs 中文文档Observable | RxJS 中文文档

概念

RxJs 使用的是观察者模式，用来编写异步队列和事件处理。

Observable 可观察的物件

Subscription 监听Observable

Operators 纯函数可以处理管道的数据如 map filter concat reduce 等

案例

类似于迭代器 next 发出通知 complete通知完成

subscribe 订阅 observable 发出的通知也就是一个观察者

import { Observable } from "rxjs";
//类似于迭代器 next 发出通知  complete通知完成
const observable = new Observable(subscriber=>{
    subscriber.next(1)
    subscriber.next(2)
    subscriber.next(3)
    setTimeout(()=>{
        subscriber.next(4)
        subscriber.complete()
    },1000)
})
observable.subscribe({
    next:(value)=>{
       console.log(value)
    }
})

案例2

interval 五百毫秒执行一次 pipe 就是管道的意思管道里面也是可以去掉接口的支持处理异步数据去处理数据这儿展示了 map 和 filter 跟数组的方法是一样的最后通过观察者 subscribe 接受回调

import { Observable, interval, take } from "rxjs";
import { map, filter,reduce,find,findIndex } from 'rxjs/operators'
const subs = interval(500).pipe(map(v => ({ num: v })), filter(v => (v.num % 2 == 0))).subscribe((e) => {
    console.log(e)
    if (e.num == 10) {
        subs.unsubscribe()
    }
})

案例3

Rxjs 也可以处理事件不过我们在Nestjs 里面就不用操作DOM 了你如果Angular 或则 Vue 框架看可以使用 fromEvent

import { Observable, interval, take,of,retry,fromEvent } from "rxjs";
import { map, filter,reduce,find,findIndex } from 'rxjs/operators'
const dom = fromEvent(document,'click').pipe(map(e=>e.target))
dom.subscribe((e)=>{
})