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. 创建工 ...
随机推荐
- godis实战
- IntelliJ IDEA 程序运行的控制台乱码
参考:https://blog.csdn.net/zp357252539/article/details/124614007 上方导航栏"Run→Edit Configurations-&q ...
- IT之软件公司组织架构
总结一下软件企业的组织架构,软件公司大部分都很年轻,整个行业还在调整期,一般规模都在300人以内,现在国内大型的软件产品公司都不是靠软件起家的,国内软件三强:华为.中信.海尔都是从硬件甚至是家电做起的 ...
- 2.4 在DispatcherServlet的service方法中,通过ServletPath获取对应的Controller对象
@Override protected void service(HttpServletRequest request, HttpServletResponse response) throws Se ...
- go 程序设计语言 命令行参数
最近打算读一读 go程序设计语言这本书, 读语言类的书是一件十分头疼的事情, 因为读一本书就意味着,看着一堆钳子 锥子工具的图片, 概念背了一大堆,仍然不知道怎么用,还是要通过实践. 还是习惯任务驱动 ...
- mysql库操作msyql
查看所有数据库 show databases; 查看当前使用的数据库 select database(); 使用数据库 use 数据库名; 创建数据库 create database 数据库名 cha ...
- 了解ASP(二)
变量 ASP中的变量有普通变量,Session变量,Application变量. 变量的生存期 在子程序外声明的变量可被 ASP 文件中的任何脚本访问和修改. 在子程序中声明的变量只有当子程序每次执行 ...
- 【面试必备】 【ES6】学Vue前必须掌握的内容(上)
变量声明 采用 let 和 const 分别声明变量和常量. 不用var所以不存在变量提升. 解构 ① 数组解构[ ] 等号左边允许存在默认值.变量的取值按照顺序. //之前的写法 var arr=[ ...
- python官方文档:https://pypi.org/
https://pypi.org/ Find, install and publish Python packages with the Python Package Index
- Ubuntu系统添加新的普通用户
1.创建一个新的普通用户 创建了可以登录的yang用户并使用/bin/bash作为shell. 设置密码. 为yang用户增加管理员权限. 切换登录用户为yang. sudo useradd -m y ...