rxjs笔记(未完成)
首先是 Observable 和promise的区别,
1返回值个数,Observable 可以返回0到无数个值。
2.Promise主动推送,控制着"值"何时被 "推送 "到回调函数。
Observable 被动,没有被订阅的时候,它就什么也不做,而且,它既可以是同步的,又可以是异步的。
import { Observable } from 'rxjs';
const foo = new Observable(subscriber => {
console.log('Hello');
subscriber.next(42);
subscriber.next(100);
subscriber.next(200);
setTimeout(() => {
subscriber.next(300); // happens asynchronously
}, 1000);
});
console.log('before');
foo.subscribe(x => {
console.log(x);
});
console.log('after');
/*结果:
"before"
"Hello"
42
100
200
"after"
300*/
操作符(operator)有两种。一种是(Pipeable Operator)对返回的数据做中间处理。不改变输入(纯函数)。它把一个 Observable 作为输入,并生成另一个 Observable 作为输出。
另外一种可以直接创建新的Observable(Creation Operator)。比如 of(1,2,3)创建一个Observable ,它将发出1,2,3,一个接着一个。
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
map(x => x * x)(of(1, 2, 3)).subscribe((v) => console.log(`value: ${v}`));
same as
// Logs:
// value: 1
// value: 4
// value: 9
退订(unsubscribe):
import { interval } from 'rxjs';
const observable1 = interval(400);
const observable2 = interval(300);
const subscription = observable1.subscribe(x => console.log('first: ' + x));
const childSubscription = observable2.subscribe(x => console.log('second: ' + x));
subscription.add(childSubscription);
setTimeout(() => {
// Unsubscribes BOTH subscription and childSubscription
subscription.unsubscribe();
}, 1000);
//second: 0 first: 0 second: 1 first: 1 second: 2
多播(Subject)既是Observable也是Observer, 类似于eventEmitter,当一个订阅者 subscribe Subject时,它并不会执行什么,而是会将订阅者注册到订阅者列表里。(类似于addListener )
import { Subject } from 'rxjs'; const subject = new Subject<number>(); subject.subscribe({
next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({
next: (v) => console.log(`observerB: ${v}`)
}); subject.next(1);
subject.next(2);
same as
// Logs:
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2
高阶Observable :
处理Observable的Observable
扁平化操作符(flattening operator)
concatAll()mergeAll()switchAll()exhaust()flatMap()concatMap()mergeMap()switchMap()exhaustMap().
Creation Operators
ajaxbindCallbackbindNodeCallbackdeferemptyfromfromEventfromEventPatterngenerateintervalofrangethrowErrortimeriif
Join Creation Operators
These are Observable creation operators that also have join functionality -- emitting values of multiple source Observables.
Transformation Operators
bufferbufferCountbufferTimebufferTogglebufferWhenconcatMapconcatMapToexhaustexhaustMapexpandgroupBymapmapTomergeMapmergeMapTomergeScanpairwisepartitionpluckscanswitchMapswitchMapTowindowwindowCountwindowTimewindowTogglewindowWhen
Filtering Operators
auditauditTimedebouncedebounceTimedistinctdistinctKeydistinctUntilChangeddistinctUntilKeyChangedelementAtfilterfirstignoreElementslastsamplesampleTimesingleskipskipLastskipUntilskipWhiletaketakeLasttakeUntiltakeWhilethrottlethrottleTime
Join Operators
Also see the Join Creation Operators section above.
Multicasting Operators
Error Handling Operators
Utility Operators
tapdelaydelayWhendematerializematerializeobserveOnsubscribeOntimeIntervaltimestamptimeouttimeoutWithtoArray
Conditional and Boolean Operators
Mathematical and Aggregate Operators
rxjs笔记(未完成)的更多相关文章
- 莫队学习笔记(未完成QAQ
似乎之前讲评vjudge上的这题的时候提到过?但是并没有落实(...我发现我还有好多好多没落实?vjudge上的题目还没搞,然后之前考试的题目也都还没总结?天哪我哭了QAQ 然后这三道题我都是通过一道 ...
- [未完成]WebService学习第一天学习笔记
[未完成]WebService学习第一天学习笔记[未完成]WebService学习第一天学习笔记
- java中基本输入输出流的解释(flush方法的使用)
转自:http://fsz521job.itpub.net/post/5606/34827 网络程序的很大一部分是简单的输入输出,即从一个系统向另一个系统移动字节.字节就是字节,在很大程度上,读服务器 ...
- angular2 学习笔记 ( rxjs 流 )
RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅, ...
- angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )
Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...
- ReactiveX 学习笔记(28)使用 RxJS + React.js 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...
- ReactiveX 学习笔记(27)使用 RxJS + Vue.js 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...
- ReactiveX 学习笔记(26)使用 RxJS + React.js 调用 REST API
JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...
- ReactiveX 学习笔记(25)使用 RxJS + Vue.js 调用 REST API
JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...
- ReactiveX 学习笔记(22)使用 RxJS + Angular 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...
随机推荐
- kubebuilder简明教程
一.operator概述 Operator 是 Kubernetes 的扩展软件,它利用 定制资源 管理应用及其组件. Operator 遵循 Kubernetes 的理念,特别是在控制器 方面[1] ...
- ABAP 拼接PDF
参考标准程序RSPO_TEST_MERGE_PDF_FILES*--合并PDF data: pdf_merger type ref to cl_rspo_pdf_merge. data: ex typ ...
- vue开发中,数据更新,但视图不刷新
我们在开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下: 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到: 第二种:通过数组下标修改数组中的元素或者手动修改数组的 ...
- Spring Security 5 ----默认的filter都有什么用?
我去找参考资料时,大部分只是来自于官网,但是很少分析为什么这么干,所以网络代码只停留于demo,生产级的应用却需要另外思考,不思考会有坑哦.大部分资料,合理不合理先不说,反正通了就行.本文试图去找寻, ...
- C - Functions again CodeForces - 789C (dp、思维)
C - Functions again CodeForces - 789C #include<iostream> #include<cstdio> #include<cm ...
- elementUi-2.13.2版本添加暂无数据
1.实现效果如下: 2. 代码实现 <el-table empty-taxt="暂无数据"></el-table> css样式设置: .el-table__ ...
- iOS 静态库与动态库的区别
静态库相关命令 查看静态库架构 lipo -info ***.a 合并两个不同架构的库 lipo -create **.a **.a -output hecheng.a
- nvm安装及使用(windon/mac)
有必要说一下nvm,因为大家做前端对node都很熟悉吧.前端的很多项目中都依赖node,还有可能每个项目依赖的node版本不一样,这样我们就上了nvm. nvm 是node Version Manag ...
- 面试题 --MySQL事务
3.1 说一说你对数据库事务的了解 事务可由一条非常简单的SQL语句组成,也可以由一组复杂的SQL语句组成.在事务中的操作,要么都执行修改,要么都不执行,这就是事务的目的,也是事务模型区别于文件系统的 ...
- 提高NTC测温精度(转发)
(一)一般精度要求:采样数据的获取,直接采用恒流源(或恒压源)上拉方式.见图(2)所示. 原理:将恒流源(或恒压源)直接作用于NTC热敏电阻Rt上,当被测对象的温度发生变化,NTC热敏电阻的阻值Rt ...