rxjs

RxJS辅助类操作符学习

由 萝らか妹 提交于 2020-02-15 00:21:44
1. 数学和聚合类操作符 （Mathematical and Aggregate Operators） count：统计数据个数 统计Observable对象个数 import {fromEvent, interval, from} from 'rxjs'; import {count, takeUntil} from 'rxjs/operators'; const seconds = interval(1000); const clicks = fromEvent(document,'click'); const secondsBeforeClick = seconds.pipe(takeUntil(clicks)); const result = secondsBeforeClick.pipe(count()); result.subscribe(x => console.log(x)); 打开页面，如果刚打开就点击页面 x:0, 如果是1s之后打开 x:1,以此类推 统计有几个值是奇数的Observable import { range } from 'rxjs'; import { count } from 'rxjs/operators'; const numbers = range(1, 7); const result = numbers.pipe(count(i =

Chaining RxJS Observables from http data in Angular2 with TypeScript

由 放肆的年华 提交于 2020-02-09 00:39:47
问题 I'm currently trying to teach myself Angular2 and TypeScript after happily working with AngularJS 1.* for the last 4 years! I have to admit I am hating it but I am sure my eureka moment is just around the corner... anyway, I have written a service in my dummy app that will fetch http data from a phoney backend I wrote that serves JSON. import {Injectable} from 'angular2/core'; import {Http, Headers, Response} from 'angular2/http'; import {Observable} from 'rxjs'; @Injectable() export class

rxjs简单入门

由 半世苍凉 提交于 2020-02-07 10:03:50
摘要： # rxjs简单入门 > rxjs全名Reactive Extensions for JavaScript，Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据、状态、事件等等转成可被观察的序列(Observable Sequence)，然后订阅序列中那些Observable对象的变化，一旦变化，就会执行事先安排好的各种转换和操作 **rxjs适用于异步场景，即前端 rxjs简单入门 rxjs全名Reactive Extensions for JavaScript，Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据、状态、事件等等转成可被观察的序列(Observable Sequence)，然后订阅序列中那些Observable对象的变化，一旦变化，就会执行事先安排好的各种转换和操作 rxjs适用于异步场景，即前端交互中接口请求、浏览器事件以及自定义事件。通过使用rxjs带给我们前所未有的开发体验。 统一异步编程的规范，不管是Promise、ajax还是事件，通通封装成 序列(Observable Sequence) ，一旦有异步环节发生变更，观察序列即可截获发生变更的信息。 前端业务层和展现层解耦，比如展现层不需要关系指定事件触发时和DOM无关的处理逻辑。同时业务层也能组装异步操作中多个异步逻辑之间的关系，无需暴露给展现层

How to combine two similar http requests returning Rx Observables?

由 妖精的绣舞 提交于 2020-02-07 05:35:05
问题 How do I merge 2 separate http requests into one response(join them)? Observable.merge( this.http.get(url1), // [{"city":"New York"},{"city":"Chicago"}] this.http.get(url2) // [{"city":"Washington"},{"city":"Detroit"}] ).subscribe(res => console.log(res.json())) I'm getting two arrays back: [{"city":"New York"},{"city":"Chicago"}], [{"city":"Washington"},{"city":"Detroit"}] What I need is a single array with the combined results: [{"city":"New York"},{"city":"Chicago"},{"city":"Washington"},{

Filtering Observable with Rxjs

由 烂漫一生 提交于 2020-02-06 08:25:54
问题 I'm trying to get a list of active jobs for the current user: jobListRef$: Observable<Job[]>; ... this.afAuth.authState.take(1).subscribe(data => { if (data && data.uid) { this.jobListRef$ = this.database.list<Job>('job-list', query => { return query.orderByChild("state").equalTo("active"); }) .snapshotChanges().map(jobs => { return jobs.map(job => { const $key = job.payload.key; const data = { $key, ...job.payload.val() }; return data as Job; }); }) .filter(val => val.map(job => { return

Filtering Observable with Rxjs

由 寵の児 提交于 2020-02-06 08:25:48
问题 I'm trying to get a list of active jobs for the current user: jobListRef$: Observable<Job[]>; ... this.afAuth.authState.take(1).subscribe(data => { if (data && data.uid) { this.jobListRef$ = this.database.list<Job>('job-list', query => { return query.orderByChild("state").equalTo("active"); }) .snapshotChanges().map(jobs => { return jobs.map(job => { const $key = job.payload.key; const data = { $key, ...job.payload.val() }; return data as Job; }); }) .filter(val => val.map(job => { return

RxJS Unit Testing: what's the functionality of the callback passed to TestScheduler

由 孤街浪徒 提交于 2020-02-06 07:28:09
问题 I'm trying to use TestScheduler to write unit test for my RxJs functions. There are many posts related to it, and I'm following this post : https://medium.com/@kevinkreuzer/marble-testing-with-rxjs-testing-utils-3ae36ac3346a There is one confusing point for the following part: I don't understand why we need to pass the callback function into TestScheduler constructor. In the post, it mentioned that it is assertDeppEqual function which tells the TestScheduler how to compare values. The methods

Subscribe to a doc using Svelte / RxJs / RxFire. How can I update the subscription

由 拜拜、爱过 提交于 2020-02-06 06:08:28
问题 I use a derived store in the code below. It feels like a strange construct because I only use the derived construct for the dynamic $session dependency and to get the normData. But not with $norm. I use $norm only once to kick off the derived store. Nevertheless it seem to work fine. But I have to renew the subscription if the $session changes. Is it possible to update the RxFire / RxJs subscription without unsubscribing first? let normDocRef = null; let normData = null; let normSubscription

Subscribe to a doc using Svelte / RxJs / RxFire. How can I update the subscription

由 吃可爱长大的小学妹 提交于 2020-02-06 06:07:26
问题 I use a derived store in the code below. It feels like a strange construct because I only use the derived construct for the dynamic $session dependency and to get the normData. But not with $norm. I use $norm only once to kick off the derived store. Nevertheless it seem to work fine. But I have to renew the subscription if the $session changes. Is it possible to update the RxFire / RxJs subscription without unsubscribing first? let normDocRef = null; let normData = null; let normSubscription

Observable详解

由 ╄→尐↘猪︶ㄣ 提交于 2020-02-05 09:09:03
Observable详解 rxjs angular2 在介绍 Observable 之前，我们要先了解两个设计模式： Observer Pattern - (观察者模式) Iterator Pattern - (迭代器模式) 这两个模式是 Observable 的基础，下面我们先来介绍一下 Observer Pattern。 Observer Pattern 观察者模式定义 观察者模式 是 软件设计模式 的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。 — 维基百科 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。 我们可以使用日常生活中，期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色：期刊出版方和订阅者，他们之间的关系如下： 期刊出版方 - 负责期刊的出版和发行工作 订阅者 - 只需执行订阅操作，新版的期刊发布后，就会主动收到通知，如果取消订阅，以后就不会再收到通知 在观察者模式中也有两个主要角色：Subject (主题) 和 Observer (观察者)
订阅 rxjs