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. 创建工 ...
随机推荐
- Mybatis-plus中通用mapper的CRUD(增、删、改、查)操作封装BaseMapper和IService(最详细)
使用Mybatis的开发者,大多数都会遇到一个问题,就是要写大量的SQL在xml文件中,除了特殊的业务逻辑SQL之外,还有大量结构类似的增删改查SQL.而且,当数据库表结构改动时,对应的所有SQL以及 ...
- Linux修改开机图形/etc/motd
修改 /etc/motd vim /etc/motd 植入图形 .--, .--, ( ( \.---./ ) ) '.__/o o\__.' {= ^ =} > - < / \ // \ ...
- docker配置文件模板
{ "registry-mirrors": [ "https://bxsfpjcb.mirror.aliyuncs.com" ], "max-conc ...
- 30:33 error 'scope' is defined but never used vue/no-unused-vars
由于一直报错,所以把这个slot-scope="scope"删除掉
- 2022-05-11内部群每日三题-清辉PMP
1.一个低概率/高影响的技术风险发生了. 项目经理该怎么做? A. 提交变更请求来调整成本和进度基准 B. 进行风险审查,评估其对项目可交付成果的影响 C. 实施风险登记册中概述的减轻计划 D. 查询 ...
- wget 和 curl的区别
原文 https://www.codenong.com/s1190000022301195/ https://geek-docs.com/linux/linux-ask-answer/differen ...
- @click,@click.native失效问题(原生js代码innerHTML中填充vue页面,页面中点击事件失效)
解决方式: window.mapVue = this <input onclick="window.mapVue.locusPath()" type="button ...
- java LinkedList 原理
概述 底层数据结构是双向链表(jdk1.6是双向循环,1.7开始不循环了),所以 新增/删除效率高,查询/修改效率相对较低 全能冠军:既是一个顺序容器,也是队列,还可以作为栈使用 未实现 Random ...
- Web安全与渗透测试笔记
Web安全与渗透测试笔记 @author: lamaper 一.基本网络知识 (一)网络是怎样联通的 TCP/IP协议 Internet Http协议 (二)Http协议 http请求 一个完整的Ht ...
- Linux 软件包 管理
rpm.deb包管理操作 yum.apt/apt-get线上管理操作 查找软件包 $ yum search [name|info] $ apt-cache search [name|info] 安装软 ...