rxjs学习笔记
api List
Rx.Observable.amb(...args)
-存在竞争关系,amb里的流只能触发一个,并且忽略其他未处理的流。
eq:
<body>
<input id="input1" type="text">
<input id="input2" type="text">
</body>
import $ from "jquery";
import Rx from "rx";
var input1 = $('#input1');
var input2 = $('#input2');
var source = Rx.Observable.amb(
Rx.Observable.fromEvent(input1, 'click').map(()=>'one'),
Rx.Observable.fromEvent(input2, 'click').map(()=>'two')
);
var subscription = source.subscribe(
function (x) {
console.log(x);
},
function (err) {
console.log('Error: ' + err);
},
function () {
console.log('Completed');
}
);
订阅了某个事件以后只处理本事件。订阅是普通订阅。
Rx.Observable.case(selector, sources, [elseSource|scheduler]
-select是一个筛选函数返回一个字符串,将字符串与sources对象的键值相匹配,发射匹配到的流。后面可选的是未匹配到的情况,默认是Rx.Observable.empty()
eq:
import Rx from "rx";
var sources = {
hello: Rx.Observable.just('clx'),
world: Rx.Observable.just('wxq')
};
var subscription = Rx.Observable.case(()=>"hello", sources, Rx.Observable.empty())
subscription.subscribe(function(x) {
console.log(x)
})
匹配到hello,就发射Rx.Observable.just('clx')流。
实际可用于请求后的配置,比如根据ajax配置数据库,
var config = {
"database": Observable.return("数据库配置"),
"cache": Observable.return("缓存配置"),
"picCDN": Observable.return("图片CDN配置,比如七牛")
};
Observable.case(()=>'database', config, Observable.empty())
.subscribe((databaseConfig) => {
// 连接数据库
})
Observable.case(()=>'picCDN', config, Observable.empty())
.subscribe((pciCDNConfig) => {
// 初始化图片CDN
})
根据不同配置项进行不同的操作。
Rx.Observable.catch(...args)
args都是一个个的观察流,当某一个抛错了,剩下的继续被发射。错误被忽略。subscribe也不会打印。当全部都抛错,会在subscribe的onError里打印。
eq:
import Rx from "rx";
var obs1 = Rx.Observable.throw(new Error('error'));
var obs2 = Rx.Observable.return(42); var source = Rx.Observable.catch(obs1, obs2); var subscription = source.subscribe(
x => console.log(`onNext: ${x}`),
e => console.log(`onError: ${e}`),
() => console.log('onCompleted'));
obs1抛错以后,42被正常输出。
项目中可以处理服务商提供服务,当第一个服务商挂掉以后用第二个,全挂掉就抛错吧。
Rx.Observable.combineLatest(...args, [resultSelector])
-当两个Observables中的任何一个发射了数据时,使用一个函数结合每个Observable发射的最近数据项,并且基于这个函数的结果发射数据。
-仔细理解这句话,合并最近发射。
eq:
import Rx from "rx"; var colors = ["紫色","黄色","蓝色","黑色"];
var shapes = ["小星星","圆形","三角形","正方形","心形","五边形"];
var source1 = Rx.Observable.interval(3000).map(()=>colors.pop());
var source2 = Rx.Observable.interval(2000).map(()=>shapes.pop()); var combined = Rx.Observable.combineLatest(source1, source2, function(x, y){
return x + "的" + y;
}).take(12); combined.subscribe((shaped)=>console.log(shaped));
2s时发射五边形,x=五边形,1s后发射黑色,打印,1s后又发射心形,这时x还是黑色,打印黑色的心形。……
晕。
rxjs学习笔记的更多相关文章
- RxJS学习笔记之Subject
本文为原创文章,转载请标明出处 目录 Subject BehaviorSubject ReplaySubject AsyncSubject 1. Subject 总的来说,Subject 既是能够将值 ...
- Angular4学习笔记(十)- 组件间通信
分类 父子组件通信 非父子组件通信 实现 父子 父子组件通信一般使用@Input和@Output即可实现,参考Angular4学习笔记(六)- Input和Output 通过Subject 代码如下: ...
- ReactiveX 学习笔记(0)学习资源
ReactiveX 学习笔记 ReactiveX 学习笔记(1) ReactiveX 学习笔记(2)创建数据流 ReactiveX 学习笔记(3)转换数据流 ReactiveX 学习笔记(4)过滤数据 ...
- Angular快速学习笔记(2) -- 架构
0. angular 与angular js angular 1.0 google改名为Angular js 新版本的,2.0以上的,继续叫angular,但是除了名字还叫angular,已经是一个全 ...
- Angular 快速学习笔记(1) -- 官方示例要点
创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 <h2>{{ hero.name | u ...
- 《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
- Angularjs2 学习笔记
angularjs2 学习笔记(一) 开发环境搭建 开发环境,vs2013 update 5,win7 x64,目前最新angular2版本为beta 17 第一步:安装node.js 安装nod ...
- Angular6 学习笔记——路由详解
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- PropertyChangeSupport 监听器模式的应用
PropertyChangeSupport 类实现的监听器功能 ,它是java jdk自带的一个类,用于监听某个对象属性的改变来触发相应信息,具体看代码介绍 import java.beans.Pro ...
- CSS硬件加速的好与坏
本文翻译自Ariya Hidayat的Hardware Accelerated CSS: The Nice vs The Naughty.感谢Kyle He帮助校对. 每个人都痴迷于60桢每秒的顺滑动 ...
- Git发生SSL certificate problem: certificate ha错误的解决方法
这两天,不知道为什么,用Git提交代码到服务器时,总出现SSL certificate problem: unable to get local issuer certificate while ac ...
- 隐藏Nginx或Apache以及PHP的版本号的方法
当黑客入侵一台服务器时,首先会”踩点”, 这里的”踩点”,指的是了解服务器中运行的一些服务的详细情况,比如说:版本号,当黑客知道相应服务的版本号后,就可以寻找该服务相应版本的一些漏洞来入侵,攻击,所以 ...
- 通过view实现rest api接口
Django rest framwork之view 基于Django的View实现Json数据的返回: # _*_ encoding:utf-8 _*_ __author__ = 'LYQ' __da ...
- java sort排序原理
事实上Collections.sort方法底层就是调用的Arrays.sort方法,而Arrays.sort使用了两种排序方法,快速排序和优化的归并排序. 快速排序主要是对那些基本类型数据(int,s ...
- case when 空值判断
在对数据库进行查询时,遇到了一个问题:查询结果中的某一列需要判断另一列是否为空的来确定值,自然就想到了case when,于是写出了下面的SQL(其他部分省略): (case date when nu ...
- Vue混合mixins
前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...
- 【python练习题】程序10
#10.题目:暂停一秒输出,并格式化当前时间. import time print(time.time())#timestamp print(time.localtime(time.time()))# ...
- Express学习(2) ------ 中间件
TJ Holowaychuck 将 “中间件”描述为易于挂载和调用的模块,可以“无序”使用,并有利于应用的快速开发. 1, 中间件是一个模块.在js中,模块意味着函数,所以中间件是一个函数.那么这个函 ...