详解Angular2中的编程对象Observable_AngularJS

前言

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的操作符先要学会看懂序列图:

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

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

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

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

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

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时停止发射数据

总结

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索angular
, angular2
observable
angularjs 指令详解、angularjs高级编程、angularjs q详解、angularjs mvc 详解、angularjs event详解,以便于您获取更多的相关知识。

时间: 2024-12-02 12:57:38

详解Angular2中的编程对象Observable_AngularJS的相关文章

详解JSP中的语句对象Statement操作MySQL的使用实例_JSP编程

语句对象Statement包含两个主要方法:executeUpdate()方法执行数据的更新操作(添加记录,删除记录,更新记录),executeQuery()方法用来执行数据的查询操作(查询记录) 添加记录 <%@page language="java" contentType="text/html;charset=gb2312"%> <%@page import="java.sql.*" %> <!DOCTYPE

详解Javascript中的Object对象_javascript技巧

Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是Object对象其实包含了很多很有用的属性和方法,尤其是ES5增加的方法,因此,本文将从最基本的介绍开始,详细说明了Object的常用方法和应用. 基础介绍 创建对象 首先我们都知道,对象就是一组相似数据和功能的集合,我们就是用它来模拟我们现实世界中的对象的.那在Javascript中,创建对象的方

详解jQuery中的deferred对象的使用(一)_jquery

 deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置.事实上,它扮演代理人(proxy)的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作.网页动画.web worker等等. jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象. 在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生

详解Silverlight中的Downloader对象

Silverlight中有一个Downloader对象,可以用来下载Silverlight应用程序中相应的文件,比如脚本 .媒体文件等等.有了它就可以根据应用程序的具体需要来下载相应的文件,而不必在Silverlight插件 初始化的时候就将整个应用程序所需要的文件全部下载下来.这样不仅可以节省用户下载应用程序所花费 的等待时间,还可以直接在应用程序中动态使用下载下来的内容而无需刷新整个页面. Downloader对象能够初始化数据传输,监视数据传输的进程,并能很方便的得到所下载的文件.加载 应

详解Android中Intent传递对象给Activity的方法_Android

Activity回顾 activity是android程序中最重要的组件之一,它是用户与android用户交互的主要组件,类似于桌面程序的图形界面.android程序大致可以分为看的见的组件和看不见的service.看得见的组件主要就是在Activity中定义,看不见的service,包括service,BroadCastReceiver,ContentProvider等等,这是后话.今天先来大致了解一下activity. 可以理解activity为盛放组件的容器,和用户交互的组件都要放在Act

详解Java中用于查找对象哈希码值的hashCode()函数_java

理解hashCode() 的作用是获取哈希码,也称为散列码:它实际上是返回一个int整数.这个哈希码的作用是确定该对象在哈希表中的索引位置. hashCode() 定义在JDK的Object.java中,这就意味着Java中的任何类都包含有hashCode() 函数. 虽然,每个Java类都包含hashCode() 函数.但是,仅仅当创建并某个"类的散列表"(关于"散列表"见下面说明)时,该类的hashCode() 才有用(作用是:确定该类的每一个对象在散列表中的位

详解Android中Intent传递对象给Activity的方法

Activity回顾 activity是android程序中最重要的组件之一,它是用户与android用户交互的主要组件,类似于桌面程序的图形界面.android程序大致可以分为看的见的组件和看不见的service.看得见的组件主要就是在Activity中定义,看不见的service,包括service,BroadCastReceiver,ContentProvider等等,这是后话.今天先来大致了解一下activity. 可以理解activity为盛放组件的容器,和用户交互的组件都要放在Act

详解Java的设计模式编程中的原型模式_java

定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象.类型:创建类模式类图: 原型模式主要用于对象的复制,它的核心是就是类图中的原型类Prototype.Prototype类需要具备以下两个条件: 实现Cloneable接口.在java语言有一个Cloneable接口,它的作用只有一个,就是在运行时通知虚拟机可以安全地在实现了此接口的类上使用clone方法.在java虚拟机中,只有实现了这个接口的类才可以被拷贝,否则在运行时会抛出CloneNotSupportedException

详解PHP中的状态模式编程_php技巧

定义状态模式,又称状态对象模式(Pattern of Objects for State),状态模式就是对象的行为模式.状态模式允许一个对象在其内部状态改变的时候改变其行为.这个对象看上去就像是改变了它的类一样 UML图 状态模式中主要角色抽象状态角色(State):定义一个接口或抽象类State,用以封装环境对象的一个特定的状态所对应的行为 具体状态(ConcreteState)角色:每一个状态类都实现了环境(Context)的一个状态所对应的行为 环境(Context)角色:定义客户端所感兴