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操作符(二)的更多相关文章

  1. RxJS操作符(三)

    一.过滤类操作符:debounce, debounceTime 跟时间相关的过滤 debounceTime自动完成:性能,避免每次请求都往出发 ); debounce中间传入Observable co ...

  2. RxJS操作符(一)

    一.创建类操作符 创建类操作符是连接传统编程和响应式编程的强梁 from: 可以把数组.Promise.以及Iterable转化为Observable. fromEvent: 可以把事件转化为Obse ...

  3. Rxjs 操作符

    1. javascript解决异步编程方案 解决javascript异步编程方案有两种,一种是promise对象形式,还有一种是是Rxjs库形式,Rxjs相对于Promise来说,有好多Promise ...

  4. 《JavaScript高级程序设计》读书笔记 ---操作符二

    关系操作符 小于(<).大于(>).小于等于(<=)和大于等于(>=)这几个关系操作符用于对两个值进行比较,比较的规则与我们在数学课上所学的一样.这几个操作符都返回一个布尔值, ...

  5. LINQ操作符二:SelectMany

    SelectMany操作符提供了将多个from子句组合起来的功能,相当于数据库中的多表连接查询,它将每个对象的结果合并成单个序列. 示例: student类: using System; using ...

  6. JAVA编程思想(2) - 操作符(二)

    5. 直接常量 -一般来说,假设程序里使用了"直接常量",编译器能够准确的知道要生成什么样的类型.但有时候却是模棱两可的. 这时候须要我们对编译器进行适当的"指导&quo ...

  7. rxjs入门7之其它操作符复习

    一.辅助类操作符 二.过滤数据流 三.转化数据流 四.异常错误处理 五.多播 ,Subject类型

  8. RxJS中高阶操作符的全面讲解:switchMap,mergeMap,concatMap,exhaustMap

    RxJS中高阶映射操作符的全面讲解:switchMap, mergeMap, concatMap (and exhaustMap) 原文链接:https://blog.angular-universi ...

  9. RxJS v6 学习指南

    为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...

随机推荐

  1. css---遮罩层

    <div id="body"> 显示页面的全部内容 <div id="open">打开弹框</div> </div&g ...

  2. nfs 权限问题

    nfs-server 上面的共享文件的权限修改后 到nfs-client 上面挂载后的权限不能刷新的问题 修改/etc/idmap.conf Domain = local.domain.edu #打开 ...

  3. Docker 安装应用

    Docker 安装应用 安装 odoo 10 : docker pull postgres:9.6 &&docker pull odoo:10 && docker ru ...

  4. 题解:[APIO2007]风铃

    你需要选一个满足下面两个条件的风铃:(1) 所有的玩具都在同一层(也就是说,每个玩具到天花板之间的杆的个数是一样的)或至多相差一层.(2) 对于两个相差一层的玩具,左边的玩具比右边的玩具要更靠下一点. ...

  5. SyntaxError: Unexpected token ' in JSON at position 2

    js中字符串转json对象时报错: Uncaught SyntaxError: Unexpected token s in JSON at position 2 解决方法: js中获取jsp的返回值 ...

  6. 关于进程、线程、应用程序域(AppDomain)

    什么是进程?什么是线程?什么是应用程序集?及三者之间的关系(以下做一些简单的概念性的理解) 三者共同的基础对象!!!——应用程序 1.进程是操作系统用于隔离众多正在运行的应用程序的机制,进程的缺点是降 ...

  7. python 发送post和get请求

    摘自:http://blog.163.com/xychenbaihu@yeah/blog/static/132229655201231085444250/ 测试用CGI,名字为test.py,放在ap ...

  8. HTTP和RFC

    RFC: Request For Comments(RFC),是一系列以编号排定的文件.文件收集了有关互联网相关信息,以及UNIX和互联网社区的软件文件.目前RFC文件是由Internet Socie ...

  9. JDK1.8 HashMap源码分析

      一.HashMap概述 在JDK1.8之前,HashMap采用数组+链表实现,即使用链表处理冲突,同一hash值的节点都存储在一个链表里.但是当位于一个桶中的元素较多,即hash值相等的元素较多时 ...

  10. Shell脚本之grep

    1. 过滤空行   grep -v ^$