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. 创建工 ...
随机推荐
- bzoj5000+的洛谷题号
前言 闲得没事把 bzoj5000+ 在 Luogu 上可找到的题面整理了一下-- 对于我,bzoj 连账号都没有,所以肯定是不清楚 bzoj 题目总数的--因此其实就是手动翻查. 工作量很大,基本不 ...
- [网鼎杯2020]boom
[网鼎杯2020]boom 分析 感觉比较友善,主要考查数学运算. 解析 解压之后发现是个exe文件,运行得到一个md5 查询: 输入明文得到: 下个挑战是解三元一次方程: 拿matlab算一下. s ...
- Python基础语法复习笔记(一):字符串
python基础复习笔记 个人主页:JoJo的数据分析历险记 个人介绍:小编大四统计在读,目前保研到统计学top3高校继续攻读统计研究生 如果文章对你有帮助,欢迎关注.点赞.收藏.订阅专栏 本专栏主要 ...
- 狂神--Vue
概述 前端三要素 HTML(结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容 CSS(表现) :层叠样式表(Cascading Style sh ...
- JVM相关总结
https://www.cnblogs.com/jiangym/p/15885161.html JVM内存模型(JMM) 根据代码画出下面的JVM内存模型 public class Math { pu ...
- React.js 修改文本中数字样式
export function numberToColor(text, color = '#635BFF', size = '12px') { let reg = /(\d+)/g; return t ...
- 【SSO单点系列】(8):CAS4.0 之整合CMS
一.描术 CMS 是采用shiro来认证的: 过程 1.调用 login.do get方式 来打开登录页面 2.录入用户名密码后调用/login.do的post来提交 并且只能是post提交 Jar ...
- 【转载】C++标准库容器与C#容器对比
转载自栈他喵的又溢出了 我简单的整理一下,方便观看: C#容器 C++容器 备注 Array C array .net的Array可以是非0起始索引(鸡肋?查了一下,用Array.CreateInst ...
- springboot上传图片
springboot上传图片 新建一个springboot项目: 在java/main/com/ljx 创建一个controller.fileController类 内容如下: package com ...
- [iOS]获取地理位置信息
1.在工程的 info.plist 文件中增加两个key( 右键 - Add Row ) Privacy - Location Always and When In Use Usage Descrip ...