首页 > 其他分享 >RxJS

RxJS

时间:2024-01-10 18:03:13浏览次数:25  
标签:Observable observerA Observer next RxJS subject

 什么是 RxJS

RxJS是一个用于响应式流的库,它基于Observables(可观察对象)和Operators(操作符)的概念。它提供了一种响应式编程的方式,使得异步数据流和事件更容易管理和组合。

 什么是流

流可以被视为一个持续的事件序列。它可以是由用户交互、网络请求、定时器等事件触发的数据序列。这?些事件产生的数据会被发送到流中,然后可以被观察者(Observer:是一个回调集合,它知道如何监听 Observable 传来的值。)订阅,以便在数据发生时执行相应的操作。流是一个非常强大的概念,因为它可以帮助我们轻松地处理异步数据和处理数据的实时变化。在RxJS中,我们可以使用各种操作符(operators)来处理流,如map、filter、merge、concat等等,这些操作符可以方便地对流进行转换和组合。

3. 什么是可观察(Observable)

Observable是一个表示事件序列的抽象概念。它可以用来描述从一个事件源(如一个用户界面事件,或一个HTTP响应)发出的异步事件序列。

3. observable和promise有什么区别

Observable 和 Promise 在某些方面是相似的,它们都用于异步编程,但 Observable 提供了更丰富的功能和更灵活的异步数据流处理。 与 Promise 不同,Observable 可以发出多个值,并且还支持取消和错误处理。Observable 表示一个异步数据流,它可以持续地使用next()发出零个、一个或多个值,并且可以在任何时候complete()完成或出错。这使得 Observable 更适合处理需要处理多个事件或需要长时间运行的异步操作的场景,例如基于流的 UI 更新或实时数据源的处理。Observable 不会自动执行,而是需要订阅者(subscriber())显式地订阅 Observable 才能开始发出值。订阅者可以处理每个值,并在需要时取消订阅。 Observable 的多值特性意味着它们可以发出多个值,但也可以只发出一个值或者不发出任何值,这取决于数据源的行为和实现。

  Cold(冷)Observables and Hot(热)Observables?有什么区别

冷observable 序列仅在调用 subscribe() 时才开始将值推送给观察者。 如果你想在许多订阅者之间共享一些资源或数据,你必须使用热观察。( Subject(主体): 相当于一个 EventEmitter,也是将一个值或事件多播到多个 Observers 的唯一方式。)

 What are RxJS Operators?(什么是 RxJS 运算符?)

以声明方式轻松组合复杂异步代码的基本构造块。
操作符是函数
有两种操作符:可联入管道的操作符是可以使用语法 observableInstance.pipe(operator()) 联入 Observables 管道的类型。其中包括 [filter(...)] rxjs.tech/api/operato… 和 [mergeMap(...)] rxjs.tech/api/operato… 。调用时,它们不会更改现有的 Observable 实例。相反,它们返回一个的 Observable,其订阅逻辑是基于第一个 Observable 的。 创建操作符是另一种操作符,可以作为独立函数调用以创建新的 Observable。例如: of(1, 2, 3) 创建一个 observable,它将一个接一个地发出 1、2 和 3

 What are RxJS Operators?(什么是 RxJS 运算符?)

什么是 Observer?  Observer 是 Observable 传递的各个值的消费者。 Observer 只是一组回调,对应于 Observable 传递的每种类型的通知:nexterror 和 complete。下面是一个典型的 Observer 对象的例子:

content_copyopen_in_newconst observer = { next: (x) => console.log('Observer got a next value: ' + x), error: (err) => console.error('Observer got an error: ' + err), complete: () => console.log('Observer got a complete notification'), };

订阅是一个表示可释放资源的对象,通常是 Observable 的一次执行。订阅有一个重要的方法 unsubscribe,它不接受任何参数,只是释放本订阅所持有的资源.

 什么是 RxJS Subject(主体)?

RxJS Subject 是一种特殊类型的 Observable,它允许将值多播到多个 Observer。虽然普通的 Observable 是单播的(每个订阅的 Observer 都拥有 Observable 的独立执行),但 Subjects 是多播的。

 RxJS Subject 几种变体或者类型?

Subjects 的变体之一是 BehaviorSubject,它具有“当前值”的概念。它存储发送给其消费者的最新值,并且每当有新的 Observer 订阅时,它将立即从 BehaviorSubject 接收到“当前值”。

import { BehaviorSubject } from 'rxjs'; const subject = new BehaviorSubject(0); // 0 is the initial value subject.subscribe({ next: (v) => console.log(`observerA: ${v}`), }); subject.next(1); subject.next(2); subject.subscribe({ next: (v) => console.log(`observerB: ${v}`), }); subject.next(3); // Logs // observerA: 0 // observerA: 1 // observerA: 2 // observerB: 2 // observerA: 3 // observerB: 3

ReplaySubject 与 BehaviorSubject 类似,它可以将旧值发送给新订阅者,但它也可以记录 Observable 执行结果的一部分。创建 ReplaySubject 时,你可以指定要重播的值的数量

import { ReplaySubject } from 'rxjs'; const subject = new ReplaySubject(3,100); // 指定要重播的值的数量3 //也可以const subject = new ReplaySubject(3,100); //指定要重播的值的数量3, //但窗口时间参数仅为 `100` 毫秒。 subject.subscribe({ next: (v) => console.log(`observerA: ${v}`), }); subject.next(1); subject.next(2); subject.next(3); subject.next(4); subject.subscribe({ next: (v) => console.log(`observerB: ${v}`), }); subject.next(5); // Logs: // observerA: 1 // observerA: 2 // observerA: 3 // observerA: 4 // observerB: 2 // observerB: 3 // observerB: 4 // observerA: 5 // observerB: 5

AsyncSubject 是一种变体,其中仅将 Observable 执行的最后一个值发送给其 Observer,并且仅在执行完成时发送。(类似于 last()操作符,因为它会等待complete()通知以传递单个值。)

import { AsyncSubject } from 'rxjs'; const subject = new AsyncSubject(); subject.subscribe({ next: (v) => console.log(`observerA: ${v}`), }); subject.next(1); subject.next(2); subject.next(3); subject.next(4); subject.subscribe({ next: (v) => console.log(`observerB: ${v}`), }); subject.next(5); subject.complete(); // Logs: // observerA: 5 // observerB: 5

什么是响应式编程,它与 Angular 有什么关系?

响应式编程的原则是您可以通过指定整个程序来构建不同的流和发生在这些流上的操作。
Angular 将 RxJS 用于其内部服务的某些方面,例如 Http、Router 等。RxJS
是一个非常强大的库,可以促进应用程序的设计。

## 什么是 RxJS Map,什么是高阶 Observable 映射?

RxJS 的高阶映射运算符:switchMap mergeMap concatMap exhaustMap RxJS 高阶映射运算符对于反应式编程中的许多常见操作非常重要。RxJS 映射运算符让我们可以将 Observable 的有效载荷投射到其他东西中。当您开始使用 Rx 运算符来转换、组合、操作和处理 Observables 发出的项目序列时,Observables 的作用就会显现出来。

switchMap :简单来说就是切换到一个新的observable。每次发射都会取消先前的内部可观察对象(您提供的函数的结果),并订阅新的可观察对象。
switchMap :简单来说就是切换到一个新的observable。每次发射都会取消先前的内部可观察对象(您提供的函数的结果),并订阅新的可观察对象。

mergeMap将每个值映射到一个 Observable,然后使用 mergeAll展平所有这些内部 Observable。与 concatMap 不同,在 mergeMap 的情况下,我们不需要等到前一个内部 observable 完成后才能激活下一个内部 observable

concatMap :将每个源值投影到一个 Observable,该 Observable 会合并到输出 Observable 中,会以串行的方式等待每个源值完成,然后再合并下一个。

exhaustMap将每个源值投影成一个 Observable,该 Observable 仅在前一个投影的 Observable 完成时才会合并到输出 Observable 中。

rxjs 节流(throttleTime(毫秒))防抖(debounceTime(毫秒))

throttleTime(毫秒) 从源 Observable 发送一个值,然后在毫秒内忽略后续源值,然后重复此过程。
debounceTime(毫秒) 只有在特定时间跨度过去且源没有发送其它值时,才会从源 Observable 发送通知。

标签:Observable,observerA,Observer,next,RxJS,subject
From: https://blog.51cto.com/u_16509975/9183609

相关文章

  • 聊聊 RXJS
    一什么是rxjs?RxJS(ReactiveExtensionsforJavaScript)是一个用于响应式编程的JavaScript库。它通过使用可观察对象(Observables)和操作符(Operators)来处理异步和事件驱动的代码。什么是响应式编程?程序的输入可以被当成一个数据流,例如excel表格的累加。响应式编程世界里知名度......
  • ERROR in node_modules/rxjs/dist/types/internal/operators/combineLatest.d.ts(3,61
    原文链接:https://www.longkui.site/error/error-in-node_modules-rxjs/4839/angular项目,启动的时候报错。详细的报错如下:这个报错的原因比较简单,rxjs的版本不对,我用的是angular7可能和rxjs版本不匹配。解法方法也很简单,主要是降版本,我们找到项目的package.json把rxjs版本改成......
  • 关于 Angular 应用里 Rxjs filter 操作符内的双重感叹号的用法
    看下列这段出现在AngularComponent内的代码:protecteduserCostCenters$:Observable<CostCenter[]>=this.userCostCenterService.getActiveCostCenters().pipe(filter((costCenters)=>!!costCenters));这段Angular组件代码涉及到Observable和RxJS操作......
  • [RxJS] Scheduler
    classObservable{constructor(subscribe){this._subscribe=subscribe;}subscribe(observer){returnthis._subscribe(observer);}staticof(value){returnnewObservable((observer)=>{observer.next(value);obse......
  • [RxJS] "Animation Allowed" problem
    consttasks=of([....]);/***{*...{...4......5......2}*...........{3...........2...5}*..................................{6....3}*..........................................{3..4....2}*}**/constanimationAllowed=t......
  • 30 天精通 RxJS (03):Functional Programming 通用函式
    了解FunctionalProgramming的通用函式,能让我们写出更简洁的代码,也能帮助我们学习RxJS。读者可能会很好奇,我们的主题是RxJS为什么要特别讲FunctionalProgramming的通用函式呢?实际上,RxJS核心的Observable操作观念跟FP的阵列操作是极为相近的,只学会以下几个基本的......
  • npm install 卡在了 reify:rxjs: timing reifyNode: node_modules/
    [(54条消息)2021-09-16npminstall@vue/cli卡在了reify:rxjs:timingreifyNode:node_modules/@vue/cli/node_modules_reifynode:node_modules/rxjs_迟糖糖的博客-CSDN博客](https://blog.csdn.net/weixin_42992212/article/details/120320744)查了一堆东西,后来发现其主要......
  • 30 天精通 RxJS (02):Functional Programming 基本观念
    FunctionalProgramming是Rx最重要的观念之一,基本上只要学会FP要上手Rx就不难了!FunctionalProgramming可以说是近年来的显学,各种新的函式编程语言推出之外,其他旧有的语言也都在新版中加强对FP的支持!什么是FunctionalProgramming?FunctionalProgramming是一种编程......
  • Rxjs 入门
    RxJS(ReactiveExtensionsforJavaScript)是一个用于处理异步数据流和事件流的库。它是基于观察者模式和迭代器模式的一种实现,可以帮助开发者更方便地处理复杂的异步操作。RxJS的核心概念是Observable(可观察对象)。Observable代表一个可观察的数据源,它可以发出多个值,并在完成或出错......
  • RxJs 里的 using operator 的使用场景介绍
    RxJS的using操作符是一种创建可观察对象的方法,它可以处理订阅开始时和结束时的资源分配。这使得using在处理需要清理的资源(如数据库连接、文件句柄或网络连接)时非常有用。using操作符创建一个可观察对象,该对象会在订阅开始时创建一个资源,并在订阅结束时释放该资源。这使得......