rxjs switchMap的实现原理

简介: rxjs switchMap的实现原理

switchMap相关文章

rxjs里switchMap operators的用法

通过rxjs的一个例子, 来学习SwitchMap的使用方法

rxjs switchMap的实现原理

rxjs的map和switchMap在SAP Spartacus中的应用 -将高阶Observable进行flatten操作

SwitchMap can cancel in-flight network requests.


先引用rxjs官网对SwitchMap的介绍:


image.png每次emission,之前的inner Observable会被cancel,新的Observable会被subscribe.


可以使用"switch to a new Observable"的方法来帮助记忆switchMap的这一特性。


Typeheads

This works perfectly for scenarios like typeaheads where you are no longer concerned with the response of the previous request when a new input arrives.


This also is a safe option in situations where a long lived inner observable could cause memory leaks, for instance if you used mergeMap with an interval and forgot to properly dispose of inner subscriptions. -


Remember, switchMap maintains only one inner subscription at a time, this can be seen clearly in the first example.


Be careful though, you probably want to avoid switchMap in scenarios where every request needs to complete, think writes to a database. switchMap could cancel a request if the source emits quickly enough. In these scenarios mergeMap is the correct option.


看个例子:


源代码:


  ngOnInit(): void {
    fromEvent(document, 'click')
  .pipe(
    // restart counter on every click
    switchMap(() => interval(1000))
  )
  .subscribe((oe) => console.log('Jerry: ' + oe));
  }

输出:image.pngimage.png

switchMap的实现:image.png

应用程序调用subscribe:image.png

每次调用intervals函数,内部都会新建一个Observable对象:image.png

调用了当前的next方法后,计数器加一,然后继续在preriod毫秒后,调度下一次执行:

image.pngimage.png

返回一个新的Observable对象:image.png

相关文章
|
5月前
|
设计模式 JavaScript 前端开发
Rxjs observable 的 subscribeToArray 方法的模拟实现
Rxjs observable 的 subscribeToArray 方法的模拟实现
Rxjs map, mergeMap 和 switchMap 的区别和联系
Rxjs map, mergeMap 和 switchMap 的区别和联系
|
JavaScript
rxjs Observable filter Operator 的实现原理介绍
rxjs Observable filter Operator 的实现原理介绍
|
JavaScript 前端开发 算法
RxJS系列06:测试 Observable
RxJS系列06:测试 Observable
|
前端开发 API 开发工具
MobX 源码解析-observable #86
MobX 源码解析-observable #86
112 0
探秘 RxJS Observable 为什么要长成这个样子?!
我们都知道 RxJS Observable 最基础的使用方法:是建立 Observable,即调用 .create API
|
前端开发 JavaScript API
继续解惑,异步处理 —— RxJS Observable
Observable 可观察对象是开辟一个连续的通信通道给观察者 Observer,彼此之前形成一种关系,而这种关系需要由 Subscription 来确立,而在整个通道中允许对数据进行转换我们称为操作符 Operator。
|
JavaScript 前端开发 调度
你会用RxJS吗?【初识 RxJS中的Observable和Observer】
概念 RxJS是一个库,可以使用可观察队列来编写异步和基于事件的程序的库。 RxJS 中管理和解决异步事件的几个关键点: Observable: 表示未来值或事件的可调用集合的概念。 Observer: 是一个回调集合,它知道如何监听 Observable 传递的值。 Subscription: 表示一个 Observable 的执行,主要用于取消执行。 Operators:** 是纯函数,可以使用函数式编程风格来处理具有map、filter、concat、reduce等操作的集合。
138 0
|
前端开发 JavaScript API
Rxjs源码解析(一)Observable
学习一个库最好的方法就是看其源码,理解其 api 的调用原理,用起来自然也就很清楚自己到底在干什么了,秉持着此观念,为了更好地理解 rxjs,抽空将其源码看了一遍 本文章不会刻意涉及概念性的东西,主线就是解读源码,并在恰当的时候给出一些小例子,源码基于 rxjs v7.4.0 版本
319 0