首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏一只想做全栈的猫

    RxjsRxjs_Subject 及其衍生类

    Rxjs_Subject 及其衍生类 在 RxJS 中,Observable 有一些特殊的类,在消息通信中使用比较频繁,下面主要介绍较常用的几个类: 1/ Subject Subject 可以实现一个消息向多个订阅者推送消息

    1.3K50发布于 2019-05-26
  • 来自专栏全栈程序员必看

    RxJS教程

    RxJS引入了Observables,一个新的javascript推送体系。 在上一个版本的 RxJS 中,Subscription 叫做 “Disposable” (可清理对象)。 – RxJS Subject 是一种特殊类型的 Observable,它允许将值多播给多个观察者,所以 Subject 是多播的,而普通的 Observables 是单播的(每个已订阅的观察者都拥有 Observable Operators (操作符) 尽管 RxJS 的根基是 Observable,但最有用的还是它的操作符。操作符是允许复杂的异步代码以声明式的方式进行轻松组合的基础代码单元。 什么是操作符?

    2.4K10编辑于 2022-06-29
  • 来自专栏草根专栏

    RxJS -- Subscription

    第一个例子: import { Observable } from "rxjs/Observable"; import { Subscription } from "rxjs/Subscription" ; import 'rxjs/add/observable/interval'; const observable = Observable.interval(1000); const subscription 而subscription在unsubscribe这个observable的时候, 会调用这个参数函数返回的function, 看例子: import { Observable } from "rxjs /Observable"; import { Subscription } from "rxjs/Subscription"; import 'rxjs/add/observable/interval' /Observable"; import { Subscription } from "rxjs/Subscription"; import 'rxjs/add/observable/interval'

    1.2K50发布于 2018-03-29
  • 来自专栏全栈修仙之路

    RxJS Subject

    订阅 Observable 在介绍 RxJS Subject 之前,我们先来看个示例: import { interval } from "rxjs"; import { take } from "rxjs RxJS Subject 其实 RxJS 也为我们提供了 Subject 类,接下我们来利用 RxJS 的 Suject 重写一下上面的示例: import { interval, Subject } from "rxjs"; import { take } from "rxjs/operators"; const interval$ = interval(1000).pipe(take(3)); Angular RxJS Subject 应用 在 Angular 中,我们可以利用 RxJS Subject 来实现组件间通信,具体示例如下: message.service.ts import { 参考资源 Understanding Subjects in RxJS 30 天精通 RxJS (22) - 什么是 Subject Communicating Between Components with

    3K31发布于 2019-11-06
  • 来自专栏前端导学

    Rxjs入门

    Rxjs英文官网域名已经变为 https://rxjs-dev.firebaseapp.com/ 本文中的例子均采用5.3版本 感受Rxjs 第一个小练习 学习用observable的方式来注册事件监听 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>第一个Rxjs 练习</title> </head> <body> <button>click me</button> <script src="https://unpkg.com/@reactivex/<em>rxjs</em> Flow</title> </head> <body> <button>click me</button> <script src="https://unpkg.com/@reactivex/rxjs 注意本例子中的数据是同步数据,虽然rxjs是专门处理异步数据的,但是不仅限于处理异步数据,同步数据也可以。 我们需要知道的是 当create方法里 调用error方法 ,则后面的任何方法都不再执行。

    1.5K30发布于 2019-05-28
  • 来自专栏Cellinlab's Blog

    深入浅出 RxJS 之 Hello RxJS

    RxJS 的世界中,Observable 对象就是一个发布者,通过 Observable 对象的 subscribe 函数,可以把这个发布者和某个观察者(Observer)连接起来。 import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/of'; // source$就是一个 Observable 在 RxJS 中,组成数据管道的元素就是操作符,对于每一个操作符,链接的就是上游(upstream)和下游(downstream)。 import { Observable } from 'rxjs/Observable'; import 'rxjs/operators/map'; const onSubscribe = observer 可以在 RxJS Marbles (opens new window) 和 RxViz (opens new window) 查看和编写弹珠图。

    3.2K10编辑于 2023-05-17
  • 来自专栏全栈修仙之路

    RxJS Observable

    RxJS 中含有两个基本概念:Observables 与 Observer。 一个普通的 JavaScript 对象只是一个开始,在 RxJS 5 里面,为开发者提供了一些保障机制,来保证一个更安全的观察者。 import { from } from "rxjs"; import { map } from "rxjs/operators"; const source$ = from([1, 2, 3, 4, 具体示例如下: import { from } from "rxjs"; import { filter, map } from "rxjs/operators"; const source$ = from 详解 让我们一起来学习RxJS Learning Observable By Building Observable 30天精通RxJS - 什么是Observable hot-vs-cold-observables

    3.3K20发布于 2019-11-05
  • 来自专栏不换的随想乐园

    RxJS 启蒙

    封装 继承 多态 由此来看,借用《深入浅出 RxJS》中的话用来收尾对 OOP 和 FP 的比较: 函数式编程中,倾向于数据就是数据,函数就是函数,函数可以处理 数据,也是并不像面向对象的类概念一样把数据和函数封在一起

    36210编辑于 2024-04-30
  • 来自专栏较真的前端

    RxJS福利~~

    作者介绍: 郑丰彧 RxJS 中文社区创建者,Nice Angular 社区成员,Angular、RxJS 爱好者,同时也十分关注 React 的发展。 福利二: RxJS 5 基本原理 文档地址:https://rxjs-cn.github.io/rxjs5-ultimate-cn/ 这是一本 Gitbook 小书,作者从自己的角度诠释了 RxJS 中的基本概念及一些操作符在怎样的业务场景下使用 操作符 文档地址:https://rxjs-cn.github.io/learn-rxjs-operators/ 这是 Learn RxJS 的中文版,作者意在通过每个操作符的清晰示例及解释来使读者切入 RxJS 的学习。 文档地址:https://github.com/RxJS-CN/awesome-rxjs 收集的全部内容都是基于 RxJS 5 的,所以请放心浏览,再也不用担心一不小心又看到老的 Rx JS 4的内容

    2.5K50发布于 2018-06-08
  • 来自专栏草根专栏

    RxJS速成

    What is RxJS? RxJS是ReactiveX编程理念的JavaScript版本。ReactiveX是一种针对异步数据流的编程。 : npm init 安装rxjs: npm install rxjs --save RxJS的主要成员 Observable: 一系列值的生产者 Observer: 它是observable值的消费者 例子 import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/from'; import 'rxjs/add 例子:  import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/timer'; import 'rxjs/ 例子: import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/of'; import 'rxjs/add/

    5.8K180发布于 2018-03-25
  • 来自专栏向治洪

    RxJs简介

    / RxJs简介 RxJS是一个异步编程的库,同时它通过observable序列来实现基于事件的编程。 流动性 (Flow) RxJS 提供了一整套操作符来帮助你控制事件如何流经 observables 。 在上一个版本的 RxJS 中,Subscription 叫做 “Disposable” (可清理对象)。 如果没有提供调度器的话,RxJS 会通过使用最小并发原则选择一个默认调度器。这意味着引入满足操作符需要的最小并发量的调度器会被选择。 因为 RxJS 使用最少的并发调度器,如果出于性能考虑,你想要引入并发,那么可以选择不同的调度器。

    5K10编辑于 2022-11-30
  • 来自专栏草根专栏

    RxJS速成 (下)

    例子:  import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/timer'; import 'rxjs/add 例子: import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/timer'; import 'rxjs/add /Observable"; import 'rxjs/add/observable/interval'; import 'rxjs/add/operator/take'; import 'rxjs/add 'rxjs/add/operator/take'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap'; import 例子: import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/of'; import 'rxjs/add/observable

    3.3K40发布于 2018-03-29
  • 来自专栏IMWeb前端团队

    Rxjs光速入门

    Rxjs则是这种模式的js的实现,处理异步能力优秀,将异步操作抽象为时间轴上的点。 Observable Rxjs核心概念就是Observable,一个可观察对象,代表着接下来将要发生的一系列事件 Rx.Observable.create(observer => { observer.next Subject 在Rxjs中,有一个Subject类型,它具有Observer和Observable的功能,不仅可以使用操作符,还可以使用next、error、complete,但是本身不是操作符 // 's1', x)}) setTimeout(() => { source$.subscribe(x => {console.log('s2', x)}) }, 1100); 当然,我们还没发挥Rxjs 将所有的异步和同步数据流抽象成放在时间轴上处理的数据点,可以通过弹珠图清晰理解整个数据流过程,处理异步的能力优秀 每一个数据流经过各种操作符操作,多个数据流协同、合并、连接,使得整个Rxjs应用在显得流程清晰

    85820发布于 2019-12-03
  • 来自专栏草根专栏

    RxJS速成 (上)

    What is RxJS? RxJS是ReactiveX编程理念的JavaScript版本。ReactiveX是一种针对异步数据流的编程。 : npm init 安装rxjs: npm install rxjs --save RxJS的主要成员 Observable: 一系列值的生产者 Observer: 它是observable值的消费者 例子 import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/from'; import 'rxjs/add/ /Observable"; import 'rxjs/add/observable/from'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator '; import 'rxjs/add/operator/take'; import 'rxjs/add/operator/share'; const numbers = Observable

    2.5K40发布于 2018-03-29
  • 来自专栏码客

    Promise 与 RxJS

    Promise与RxJS对比 相似处 他们都解决了原来代码的多层嵌套或者是不断的callback,使代码看起来更优雅也便于维护。 resolve('---promise timeout---'); }, 2000); }); promise.then(value => console.log(value)); RxJS

    2.1K20发布于 2020-05-09
  • 来自专栏寻找石头鱼

    Rxjs常用operators

    本文使用的是angular6内置的rxjs,版本号为6.3.3 concat 通过顺序地发出多个 Observables 的值将它们连接起来,一个接一个的。

    1.9K30发布于 2019-08-20
  • 来自专栏lhyt前端之路

    Rxjs光速入门

    Rxjs则是这种模式的js的实现,处理异步能力优秀,将异步操作抽象为时间轴上的点。 Observable Rxjs核心概念就是Observable,一个可观察对象,代表着接下来将要发生的一系列事件 Rx.Observable.create(observer => { observer.next Subject 在Rxjs中,有一个Subject类型,它具有Observer和Observable的功能,不仅可以使用操作符,还可以使用next、error、complete,但是本身不是操作符 // 's1', x)}) setTimeout(() => { source$.subscribe(x => {console.log('s2', x)}) }, 1100); 当然,我们还没发挥Rxjs 将所有的异步和同步数据流抽象成放在时间轴上处理的数据点,可以通过弹珠图清晰理解整个数据流过程,处理异步的能力优秀 每一个数据流经过各种操作符操作,多个数据流协同、合并、连接,使得整个Rxjs应用在显得流程清晰

    87720编辑于 2022-09-21
  • 来自专栏ThoughtWorks

    RxJS 快速入门

    这是一篇给新手的 RxJS 快速入门,它可能不精确、不全面,但力求对新手友好。 ? ---- RxJS 主角登场了。RxJS 就是 ReactiveX 在 JavaScript 语言上的实现。 对于 JavaScript 程序员来说,不管你是前端还是 NodeJS 后端,RxJS 都会令你受益。 由于 JavaScript 本身的缺陷,RxJS 不得不采用了很多怪异的写法。 这个操作符几乎总是放在最后一步,因为 RxJS 的各种 operator 本身就可以对流中的数据进行很多类似数组的操作,比如查找最小值、最大值、过滤等。 这是因为 RxJS 中的很多操作符都遵循着同样的命名模式。

    2.6K20发布于 2019-01-02
  • 来自专栏用户9378866的专栏

    你会用RxJS吗?【初识 RxJS中的Observable和Observer】

    概念RxJS是一个库,可以使用可观察队列来编写异步和基于事件的程序的库。RxJS 中管理和解决异步事件的几个关键点:Observable: 表示未来值或事件的可调用集合的概念。 牛刀小试我们通过在dom上绑定事件的小案例,感受一下Rxjs的魅力。 ;复制代码用Rxjs创建一个observable,内容如下import { fromEvent } from 'rxjs';fromEvent(document, 'click').subscribe( 可以隔离状态,import { fromEvent, scan } from 'rxjs';fromEvent(document, 'click') .pipe(scan((count) => count 通过上面的案例可以看出,RxJS的强大之处在于它能够使用纯函数生成值。这意味着您的代码不太容易出错。 通常你会创建一个不纯的函数,你的代码的其他部分可能会弄乱你的状态。

    2.1K30编辑于 2022-08-17
  • 来自专栏全栈修仙之路

    RxJS mergeMap和switchMap

    使用 RxJS 我们可以可以很方便地实现上述功能: import { fromEvent, interval } from 'rxjs'; const button = document.querySelector 此时我们来更新一下上面的示例,以便更加直观的了解上述概念: import { fromEvent, interval } from 'rxjs'; import { map } from 'rxjs/operators import { fromEvent, interval } from 'rxjs'; import { map, mergeAll } from 'rxjs/operators'; const click 在 RxJS 中这也是一个通用的模式,因此也有一个快捷方式来实现相同的行为 —— switchMap(): switchMap() <=> map() + switch() const button = 参考资源 understanding-mergemap-and-switchmap-in-rxjs

    2.5K41发布于 2019-11-05
领券