RxJS操作符(二)
take()自动取消订阅,可以终止Observable和Observe之间的订阅关系。
一、Observable的性质
三种状态:nex, error, complete
进入到Error状态:
const interval$ = Rx.Observable.interval()
.filter(val=>{
throw '出错了'
})
.take()
.reduce((x,y)=>{//reduce接收函数作为参数
return [...x,y];
},[]) interval$.subscribe(
val=>console.log(val),
err=>console.error('Error:' + err),
()=>console.log('I am complete')
);
二、特殊类型的Observable
- 永不结束
- Never
- Empty
- Throw
永不结束:没有complete状态,比如计时器,每隔1s发射item。
Never:完全不发射item,也不结束。【测试时帮助构成条件】
const interval$ = Rx.Observable.never();
//不会emit任何元素,也不会结束 interval$.subscribe(
val=>console.log(val),
err=>console.error('Error:' + err),
()=>console.log('I am complete')
);
Empty:流里没有元素,直接进入Complete状态。
const interval$ = Rx.Observable.empty(); //不会输出任何元素,直接结束 interval$.subscribe(
val=>console.log(val),
err=>console.error('Error:' + err),
()=>console.log('I am complete')
);
Throw:不发生任何东西,直接进入Error状态。
const interval$ = Rx.Observable.throw('出错了'); interval$.subscribe(
val=>console.log(val),
err=>console.error('Error:' + err),
()=>console.log('I am complete')
);
三、工具类操作符do
一般用来做调试。
或者外部条件的设置。
流进入到下一步之前需要对外部的东西进行改变【写文件之类】
const interval$ = Rx.Observable.interval()
.map(val=>val*)
.do(v=>console.log('val is' +v)) //在map之后,take之前,在流发生之前看一下流里有什么东西
.take();
interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
do很像临时subscribe,但是没有把流中断掉。可以继续应用操作符。临时中间桥梁,打印值做调试。
let logLabel='当前值是'; const interval$ = Rx.Observable.interval()
.map(val=>val*)
.do(v=>{
console.log(logLabel +v); //取得了外部的值
logLabel='当前'; //改变了外部的值
})
.take(); interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
四、变换类操作符:scan
scan:
场景:记住之前的运算结果。每次运算都会发射值。
scan接收函数作为参数,x是增加器,默认初始值0,把函数返回的结果作为下次的x。
const interval$ = Rx.Observable.interval()
.filter(val=>val%===)
.scan((x,y)=>{//scan接收函数作为参数
return x+y;
})
.take() interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
五、数学类操作符reduce
数组中也有,使用比较频繁。
和scan对比,reduce只会发射一个最终值。
.filter(val=>val%===)
.take()
.reduce((x,y)=>{//reduce接收函数作为参数,只会发射一个最后的值
return x+y;
}) interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
高级用法:
const interval$ = Rx.Observable.interval()
.filter(val=>val%===)
.take()
.reduce((x,y)=>{//reduce接收函数作为参数
return [...x,y]; //每次数组加y
},[]) //x初始值为空数组[] interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
六、过滤类操作符 filter,take,first/last,skip...
总共100多种operator。
filter:
let logLabel='当前值是'; const interval$ = Rx.Observable.interval()
.filter(val=>val%===) //过滤偶数
.do(v=>{console.log(logLabel +v);
logLabel='当前';}
)
.take(); interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
first:
const interval$ = Rx.Observable.interval()
.filter(val=>val%===)
.first() //和take(1)是一样的,取第一个
// .take(1) interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
skip: 和take相反
const interval$ = Rx.Observable.interval()
.filter(val=>val%===)
.skip(); //过滤掉0和2 interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
用skip和take就能做到分页的效果。
七、常见创建类操作符:Interval,Timer
1、interval
const interval$ = Rx.Observable.interval();
interval$.subscribe(val=>console.log(val));
通过take取前3个来看三种状态的效果
const interval$ = Rx.Observable.interval().take();
interval$.subscribe(
val=>console.log(val),
err=>console.log(err),
()=>console.log('I am complete')
);
2、Timer
const timer$= Rx.Observable.timer(); timer$.subscribe(v=>console.log(v));
//控制台只输出一个值0
第一个参数:delay多长时间
第二个参数:之后要以什么频率发送
const timer$= Rx.Observable.timer(,);
timer$.subscribe(v=>console.log(v));
//类似interval,但是interval不能指定开始延迟时间
实践:给Observable增加一个debug操作符
只有在生产环境才输出
import {Observable} from 'rxjs/Observable';
import {environment} from '../../environments/environment'; declare module 'rxjs/Observable' {
interface Observable<T> {
debug: (...any) => Observable<T>;
}
} Observable.prototype.debug = function(message: string) {
return this.do(
(next) => {
if (!environment.production) {
console.log(message, next);
}
},
(err) => {
if (!environment.production) {
console.error('ERROR>>>', message, err);
}
},
() => {
if (!environment.production) {
console.log('Completed - ');
}
}
);
};
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:https://www.cnblogs.com/starof/p/9137865.html 有问题欢迎与我讨论,共同进步。
RxJS操作符(二)的更多相关文章
- RxJS操作符(三)
一.过滤类操作符:debounce, debounceTime 跟时间相关的过滤 debounceTime自动完成:性能,避免每次请求都往出发 ); debounce中间传入Observable co ...
- RxJS操作符(一)
一.创建类操作符 创建类操作符是连接传统编程和响应式编程的强梁 from: 可以把数组.Promise.以及Iterable转化为Observable. fromEvent: 可以把事件转化为Obse ...
- Rxjs 操作符
1. javascript解决异步编程方案 解决javascript异步编程方案有两种,一种是promise对象形式,还有一种是是Rxjs库形式,Rxjs相对于Promise来说,有好多Promise ...
- 《JavaScript高级程序设计》读书笔记 ---操作符二
关系操作符 小于(<).大于(>).小于等于(<=)和大于等于(>=)这几个关系操作符用于对两个值进行比较,比较的规则与我们在数学课上所学的一样.这几个操作符都返回一个布尔值, ...
- LINQ操作符二:SelectMany
SelectMany操作符提供了将多个from子句组合起来的功能,相当于数据库中的多表连接查询,它将每个对象的结果合并成单个序列. 示例: student类: using System; using ...
- JAVA编程思想(2) - 操作符(二)
5. 直接常量 -一般来说,假设程序里使用了"直接常量",编译器能够准确的知道要生成什么样的类型.但有时候却是模棱两可的. 这时候须要我们对编译器进行适当的"指导&quo ...
- rxjs入门7之其它操作符复习
一.辅助类操作符 二.过滤数据流 三.转化数据流 四.异常错误处理 五.多播 ,Subject类型
- RxJS中高阶操作符的全面讲解:switchMap,mergeMap,concatMap,exhaustMap
RxJS中高阶映射操作符的全面讲解:switchMap, mergeMap, concatMap (and exhaustMap) 原文链接:https://blog.angular-universi ...
- RxJS v6 学习指南
为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...
随机推荐
- css---遮罩层
<div id="body"> 显示页面的全部内容 <div id="open">打开弹框</div> </div&g ...
- nfs 权限问题
nfs-server 上面的共享文件的权限修改后 到nfs-client 上面挂载后的权限不能刷新的问题 修改/etc/idmap.conf Domain = local.domain.edu #打开 ...
- Docker 安装应用
Docker 安装应用 安装 odoo 10 : docker pull postgres:9.6 &&docker pull odoo:10 && docker ru ...
- 题解:[APIO2007]风铃
你需要选一个满足下面两个条件的风铃:(1) 所有的玩具都在同一层(也就是说,每个玩具到天花板之间的杆的个数是一样的)或至多相差一层.(2) 对于两个相差一层的玩具,左边的玩具比右边的玩具要更靠下一点. ...
- SyntaxError: Unexpected token ' in JSON at position 2
js中字符串转json对象时报错: Uncaught SyntaxError: Unexpected token s in JSON at position 2 解决方法: js中获取jsp的返回值 ...
- 关于进程、线程、应用程序域(AppDomain)
什么是进程?什么是线程?什么是应用程序集?及三者之间的关系(以下做一些简单的概念性的理解) 三者共同的基础对象!!!——应用程序 1.进程是操作系统用于隔离众多正在运行的应用程序的机制,进程的缺点是降 ...
- python 发送post和get请求
摘自:http://blog.163.com/xychenbaihu@yeah/blog/static/132229655201231085444250/ 测试用CGI,名字为test.py,放在ap ...
- HTTP和RFC
RFC: Request For Comments(RFC),是一系列以编号排定的文件.文件收集了有关互联网相关信息,以及UNIX和互联网社区的软件文件.目前RFC文件是由Internet Socie ...
- JDK1.8 HashMap源码分析
一.HashMap概述 在JDK1.8之前,HashMap采用数组+链表实现,即使用链表处理冲突,同一hash值的节点都存储在一个链表里.但是当位于一个桶中的元素较多,即hash值相等的元素较多时 ...
- Shell脚本之grep
1. 过滤空行 grep -v ^$