rxjs学习
推荐一个好的网站:http://cn.rx.js.org/manual/overview.html#-
https://rxjs-cn.github.io/learn-rxjs-operators/operators/error_handling/catch.html
https://segmentfault.com/a/1190000010599259
创建的操作符有哪些
timer
// 1秒后发出0,然后结束,因为没有提供第二个参数
const source = Rx.Observable.timer(1000);
/*
timer 接收第二个参数,它决定了发出序列值的频率,在本例中我们在1秒发出第一个值,
然后每2秒发出序列值
*/
const source = Rx.Observable.timer(1000, 2000);
throw
// 在订阅上使用指定值来发出错误
const source = Rx.Observable.throw('This is an error!');
range
// 依次发出1-10
const source = Rx.Observable.range(1,10);
// 输出: 1,2,3,4,5,6,7,8,9,10
const example = source.subscribe(val => console.log(val));
catch:
// 发出错误
const source = Rx.Observable.throw('This is an error!');
// 优雅地处理错误,并返回带有错误信息的 observable
const example = source.catch(val => Rx.Observable.of(`I caught: ${val}`));
// 输出: 'I caught: This is an error'
const subscribe = example.subscribe(val => console.log(val));
map flatmap switchmap:
在这篇文章中我会对map
,flatMap
和flatMapLatest
三个操作符进行比较,下面我们来举个例子。
let stream = Observable.interval(1000).take(10);
return stream.map(n => n * 2);
上面的代码模拟了异步行为,每隔1s
发射一个数字。这个例子很简单,你会随着时间推移得到一连串的数字。
我们再来看另一个例子。
let stream = Observable.interval(1000).take(10);
return stream.map(n => Observable.timer(500).map(() => n));
这里stream
会返回一个Observable
而不是数字。
如果我想要拿到那些数字,我该怎么办?
let stream = Observable.interval(1000).take(10);
return stream.flatMap(n => Observable.timer(500).map(() => n));
这里使用了flatMap
而不是map
。flatMap
将响应数据“打平”,也就是说把映射后新的Observable
转化为了数据流,订阅之后会获得这个新Observable
发射的数据,而不是Observable
本身。
译者注:flatMap
有一个很适用的场景,就是搜索框。在用户输入一串字符后,将其发送到服务器并获取搜索结果,这里就涉及到两个Observable
。
Observable
.fromEvent($input, 'keyup')
.flatMap(text => getHttpResponse(text))
.subscribe(data => console.log(data))
使用flatMap
就可以直接获取到新的Observable
返回的数据。但是这里存在一个问题,如果用户有多次输入,由于网络原因可能会发生前一次响应时间比后一次长的情况,这时后一次的结果就被覆盖了。flatMapLatest
可以解决这个问题。如果之前的Observable
还没有未触发,而又收到了新的Observable
,flatMapLatest
会取消之前的Observable
,只处理最新收到的Observable
,这样就保证了处理请求的先后顺序,flatMapLatest
在RxJS 5.x
中已更名为switchMap
。
public:
// 每1秒发出值
const source = Rx.Observable.interval(1000);
const example = source
// 副作用只会执行1次
.do(() => console.log('Do Something!'))
// 不会做任何事直到 connect() 被调用
.publish();
/*
source 不会发出任何值直到 connect() 被调用
输出: (5秒后)
"Do Something!"
"Subscriber One: 0"
"Subscriber Two: 0"
"Do Something!"
"Subscriber One: 1"
"Subscriber Two: 1"
*/
const subscribe = example.subscribe(val => console.log(`Subscriber One: ${val}`));
const subscribeTwo = example.subscribe(val => console.log(`Subscriber Two: ${val}`));
// 5秒后调用 connect,这会使得 source 开始发出值
setTimeout(() => {
example.connect();
},5000)
share:
// 1秒后发出值
const source = Rx.Observable.timer(1000);
// 输出副作用,然后发出结果
const example = source
.do(() => console.log('***SIDE EFFECT***'))
.mapTo('***RESULT***');
/*
***不共享的话,副作用会执行两次***
输出:
"***SIDE EFFECT***"
"***RESULT***"
"***SIDE EFFECT***"
"***RESULT***"
*/
const subscribe = example.subscribe(val => console.log(val));
const subscribeTwo = example.subscribe(val => console.log(val));
// 在多个订阅者间共享 observable
const sharedExample = example.share();
/*
***共享的话,副作用只执行一次***
输出:
"***SIDE EFFECT***"
"***RESULT***"
"***RESULT***"
*/
const subscribeThree = sharedExample.subscribe(val => console.log(val));
const subscribeFour = sharedExample.subscribe(val => console.log(val));
rxjs学习的更多相关文章
- rxjs学习笔记
api List Rx.Observable.amb(...args) -存在竞争关系,amb里的流只能触发一个,并且忽略其他未处理的流. eq: <body> <input id= ...
- RxJS学习笔记之Subject
本文为原创文章,转载请标明出处 目录 Subject BehaviorSubject ReplaySubject AsyncSubject 1. Subject 总的来说,Subject 既是能够将值 ...
- rxjs的世界
rxjs学习了几个月了,看了大量的东西,在理解Observable的本文借鉴的是渔夫的故事,原文,知识的主线以<深入浅出rxjs>为主,动图借鉴了rxjs中文社区翻译的文章和国外的一个动图 ...
- rxjs简单的Observable用例
import React from 'react'; import { Observable } from 'rxjs'; const FlowPage = () => { const onSu ...
- 【响应式编程的思维艺术】 (1)Rxjs专题学习计划
目录 一. 响应式编程 二. 学习路径规划 一. 响应式编程 响应式编程,也称为流式编程,对于非前端工程师来说,可能并不是一个陌生的名词,它是函数式编程在软件开发中应用的延伸,如果你对函数式编程还没有 ...
- RxJS v6 学习指南
为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...
- 学习RxJS: 导入
原文地址:http://www.moye.me/2016/05/31/learning_rxjs_part_one_preliminary/ 引子 新手们在异步编程里跌倒时,永远会有这么一个经典问题: ...
- angular2 学习笔记 ( rxjs 流 )
RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅, ...
- angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )
Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...
随机推荐
- 【环境变量】Linux 下三种方式设置环境变量
1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似的错误. 2.那么什么是环境变 ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON MirrorImage
zw版[转发·台湾nvp系列Delphi例程]HALCON MirrorImage procedure TForm1.Button1Click(Sender: TObject);var img, im ...
- 常用linux命令:locate 命令
locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...
- LoadRunner 自动关联、手动关联的帖子
https://www.guru99.com/correlation-in-loadrunner-ultimate-guide.html 这个网页里介绍了关联的概念,自动关联和手动关联的知识...
- eclipse svn插件 设置自动加锁相关
eclipse svn插件 设置自动加锁相关 Subclipse 1.10.9 发布,改进说明:SVNKit 1.8.8Exception proof repository sorter. (1616 ...
- git常用命令3
一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态git commit 提交git branch -a 查看所有的分支git branch -r 查看 ...
- SaltStack安装及配置
1.简介SaltStack是一个服务器基础架构集中化管理平台,具备配置管理.远程执行.监控等功能,一般可以理解为简化版的puppet和加强版的func.SaltStack基于Python语言实现,结合 ...
- Centos7.5 安装Netdata
切为root, yum install zlib-devel gcc make git autoconf autogen guile-devel automake pkgconfig -y yum i ...
- 高并发下,php使用uniqid函数生成唯一标识符的四种方案
PHP uniqid()函数可用于生成不重复的唯一标识符,该函数基于微秒级当前时间戳.在高并发或者间隔时长极短(如循环代码)的情况下,会出现大量重复数据.即使使用了第二个参数,也会重复,最好的方案是结 ...
- 20165211 2017-2018-2 《Java程序设计》第6周学习总结
20165211 2017-2018-2 <Java程序设计>第6周学习总结 教材学习内容总结 本周,我学习了书本上第八.十五两章的内容,以下是我整理的主要知识. 第八章 常用实用类 St ...