详解Angular2中的编程对象Observable


Posted in Javascript onSeptember 17, 2016

前言

RxJs提供的核心是Observable对象,它是一个使用可观察数据序列实现组合异步和事件编程。
跟这个很类似的异步编程模型是Promise,Promise是基于状态变化的异步模型,一旦由等待状态进入成功或失败状态便不能再次修改,当状态变化时订阅者只能够拿到一个值;而Observable是基于序列的异步编程模型,随着序列的变化,订阅者可以持续不断的获取新的值。而且Promise只提供回话机制,并没有更多的操作来支持对结果的复杂处理,而Observable提供了多种多样的操作符,来处理运算结果,以满足复杂的应用逻辑。

在实际编程中,我们主要与三个对象打交道:ObservableobserverSubscription

以一个元素的click事件为例看看如何使用Observable:

var clickStream = new Rx.Observable(observer => {
var handle = evt => observer.next(evt);
element.addEventListener('click', handle);

return () => element.removeEventListener('click', handle);
});

subscription = clickStream.subscribe(evt => {
console.log('onNext: ' + evt.id);
}, err => {
console.error('onError');
}, () => {
console.log('onComplete');
});

setTimeout(() => {
subscription.unsubscribe();
}, 1000);

如果每个事件都需要这么包装一下,岂不是太麻烦了,所以RxJs为我们提供了一个便利函数:Observable.fromEvent来方便的衔接事件。

常见的链接操作符:concat、merge、combineLates等

投影操作:map、flatMap,flatMap需要重点介绍

过滤:filter、distinctUltilChanges、

操作符分类:Operators by Categories

错误处理:catch、retry、finally

减压:debounce、throttle、sample、pausable

减少:buffer、bufferWithCount、bufferWithTime

想要掌握Observable的操作符先要学会看懂序列图:

详解Angular2中的编程对象Observable

箭头代表着随时间变化的序列,比如在一个元素上不断点击鼠标,圆圈代表序列对外产生的影响,如每一次点击元素都会触发一次事件回调,圆圈中的数字是对外发射的信息,如每一次事件的触发都会有一个事件对象,代表本次操作的一些信息。

想要灵活的运用Observable处理复杂的逻辑,就要学会使用它提供的操作符。我将操作符分为两类,单序列操作和复合序列操作,单序列操作是指的针对一个序列进行的操作运算,复合序列操作指的是对两个或者多个序列进行处理的操作符,复合序列操作相对更难懂一些。

下面先看单序列操作,以map操作为例:

详解Angular2中的编程对象Observable

map操作是将一个序列中每次对外发射的信息做转换,如上图map将每次的发射值乘以十,那么当订阅者订阅之后每次得到的订阅值就不再是原始的123而是经过转换后的10 20 30。通过序列图能更方便的理解Observable的运算。

下面我们来看一个复合序列操作,以merge为例

详解Angular2中的编程对象Observable

merge操作的目的是将两个独立序列,合成一个序列。原本序列1随着时间的前进,在100ms时发射a,在200ms时发射b,300ms时发射c,它的订阅者在400ms将受到abc三个值;序列2在150ms时发射d,250ms时发射e,350ms时发射f,它的订阅者在400ms内收到def三个值。而merge之后的新序列将在400ms内收到abcdef(注意顺序)。

常用操作符的理解:

Observable.range:发射一定数量值得序列。

Observable.toArray: 在序列完成时将所有发射值转换为一个数组。

Observable.flatMap: 将原始序列流中的元素转化为一个新的序列流,并将这个新的序列流merge到原来的序列中元素的位置。

Observable.startWith: 它会设置Observable序列的第一个值

Observable.combineLatest: 类似于promiseAll,在所有序列有结果后才会执行

Observable.scan: 将序列中每次发射的值可以做聚合,与reduce类似,reduce会将整个序列的值聚合起来,在序列完成时发送一个最终值

Observable.sample: 从持续的序列中取得一定的样品

Observable.merge:将多个序列合并成一个,可以做OR来使用

Observable.timestamp: 能够得到每个发射值的发射时的时间

Observable.distinctUntilChanged(compare, selector): selector取出用来比较的key,compare用来比较两个key

Observable.takeWhile() 当参数为false时停止发射数据

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
默认让页面的第一个控件选中的javascript代码
Dec 26 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
详细总结Javascript中的焦点管理
Sep 17 #Javascript
js变量提升深入理解
Sep 16 #Javascript
再谈javascript常见错误及解决方法
Sep 16 #Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 #Javascript
浅谈jQuery效果函数
Sep 16 #Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 #Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python调用自定义函数的实例操作
2019/06/26 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
Python远程方法调用实现过程解析
2020/07/28 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
生产厂厂长岗位职责
2013/12/25 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
境外导游求职信
2014/02/27 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
初中生评语大全
2014/04/24 职场文书
区域销售主管岗位职责
2014/06/15 职场文书