当前位置: 首页 > 编程日记 > 正文

Angular 可观察对象(Observable)

可观察对象(Observable)

可观察对象支持在应用的发布者和订阅者之间传递消息。

可观察对象是声明式的 —— 即定义的用于发布值的函数,在有消费者订阅它之前,这个函数不会实际执行。


可观察对象可能会发出的三种通知:

通知类型说明
next必要。用来处理每个送达值。在开始执行后可能执行零次或多次。
error可选。用来处理错误通知。错误会中断这个可观察对象实例的执行过程。
complete可选。用来处理执行完毕(complete)通知。当执行完毕后,这些值就会继续传给下一个处理器。

定义观察者

观察者(observer): 用于接收可观察对象通知的处理器要实现 Observer 接口,这个对象定义了一些回调函数来处理可观察对象可能会发来的三种通知。
观察者对象可以定义这三种处理器的任意组合。如果你不为某种通知类型提供处理器,这个观察者就会忽略相应类型的通知。

// Create observer object
const myObserver = {next: (_data) => {// next通知类型处理器},error: err => {// error通知类型处理器},complete: () => console.log('Observer got a complete notification'),
};

订阅

只有当Observable的实例被订阅时,Observable实例才会发布值。订阅时要先调用该实例的subscribe() 方法,并把一个观察者对象传给它,用来接收通知。

语法:Observable.subscribe(ObserverObject),其中,Observable为可观察对象实例,ObserverObject为观察者对象。

// 官网示例
// Create simple observable that emits three values
const myObservable = of(1, 2, 3);// Create observer object
const myObserver = {next: x => console.log('Observer got a next value: ' + x),error: err => console.error('Observer got an error: ' + err),complete: () => console.log('Observer got a complete notification'),
};// Execute with the observer object
myObservable.subscribe(myObserver);
// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification

另外,subscribe() 方法还可以接收定义在同一行中的回调函数,无论 next、error 还是 complete 处理器。比如,下面的 subscribe() 调用和前面指定预定义观察者的例子是等价的。

myObservable.subscribe(x => console.log('Observer got a next value: ' + x),err => console.error('Observer got an error: ' + err),() => console.log('Observer got a complete notification')
);

注: 无论哪种情况,next通知类型的处理器是必要的,而error和complete处理器是可选的。

subscribe() 调用会返回一个 Subscription 对象,该对象具有一个 unsubscribe()方法。 当调用该方法时,你就会停止接收通知。


—— END ——

相关文章:

select框高度问题

<div class"article-start-box"> <span class"categery">分类栏目</span> <select style"position: absolute;z-index: 1;margin-left: 40px;" class"choose" οnmοusedοwn"if(this.options.length>6)…

c#技巧教程(连载)

c#技巧教程系列_1 http://www.rayfile.com/files/e03d922e-2418-11de-858a-0019d11a795f/ 转载于:https://www.cnblogs.com/manwu2008/archive/2009/04/08/1431823.html

JavaScript 数据拷贝

JavaScript 数据类型 基本数据类型&#xff1a;字符串&#xff08;String&#xff09;、数字(Number)、布尔(Boolean)、对空&#xff08;Null&#xff09;、未定义&#xff08;Undefined&#xff09;、Symbol。引用数据类型&#xff1a;对象( Object )、数组( Array ) 和 方法…

Java链表和递归

删除链表的指定元素&#xff1a; public class ListNode {public int val;public ListNode next;public ListNode(int x){valx;}//链表节点的构造函数//使用arr为参数&#xff0c;创建一个链表&#xff0c;当前的ListNode为链表头节点public ListNode(int arr[]){if(arrnull||a…

设计模式笔记(9)---组合模式(结构型)

Gof定义 将对象组合成树形结构以表示“部分--整体”的层次结构。Composite使得用户对单个对象和组合对象使用具有一致性。 在面向对象系统中&#xff0c;我们经常会遇到一类具有”容器“特征的对象---即他们在充当对象的同时&#xff0c;又是其他对象的容器。比如在一些管理系统…

npm install出现的错误

在使用cnpm 安装node依赖包的时候&#xff0c;出现上述错误&#xff0c;网上搜索&#xff0c;说是有两个解决方案&#xff1a; 虽然提示不适合Windows&#xff0c;但是问题好像是sass loader出问题的。所以只要执行下面命令即可&#xff1b; 方案一&#xff1a; cnpm rebuild n…

射频放大器芯片3阶截点计算与芯片选择

在选用射频放大器芯片时&#xff0c;除了需要考虑增益、噪声指数等指标外&#xff0c;线性指标也是必须关注的参数。在射频或微波多载波通讯系统中&#xff0c;三阶交调截取点IP3&#xff08;Third-order Intercept Point&#xff09;是一个衡量线性度或失真的重要指标。交调失…

Python-接口自动化(二)

python基础知识&#xff08;二&#xff09; &#xff08;二&#xff09;常用控制流 1、控制语句 分支语句&#xff1a;起到一个分支分流的作用&#xff0c;类似马路上的红绿灯 循环语句&#xff1a;for while 可以使代码不断重复的执行 2、判断语句&#xff1a;关键字是if..eli…

Angular CLI在线安装和离线安装

Angular CLI 安装方式 默认已经安装了 Node.js 和 npm 包管理器。 1. 在线安装 可以使用外网的情况下&#xff0c;可以使用在线安装的方式。 要使用 npm 命令全局安装 CLI&#xff0c;请打开终端/控制台窗口&#xff0c;输入如下命令&#xff1a; npm install -g angular/…

近来工作和面试一些人的感受(原)

最近公司招聘&#xff0c;面试了很多人&#xff0c;有牛人 - 无所不能的&#xff0c;自认为没必要再提高的牛人&#xff0c;有硕士&#xff0c;有啥都不懂乱投简历的&#xff0c;有简历项目经验写几十个的各种技术都精通的&#xff0c;还有水平一般却要求薪水很高的&#xff0c…

关于vue+webpack的一点配置

开发环境跨域访问&#xff1a; config/index.js 增加proxyTable里的内容&#xff0c;然后可以在config/dev.env.js中设置访问地址的origin为"/api" 本地图片访问问题&#xff1a; 一般&#xff0c;放在static下&#xff0c;图片访问地址设置成‘./static/....’ js等…

2.5Gb/s混合集成光发射机

0、引言<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />在信息呈爆炸式发展的今天&#xff0c;光纤通信已成为现代信息网络的主要传输手段&#xff0c;近几年国家干线网大部分仍采用2.5Gb/s系统, 10Gb/s系统正积极研制开发&…

laravel5.8的使用

首先&#xff0c;确定电脑已经安装了composer。最好是全局安装 然后打开phpstorm的控制台&#xff1a; composer create-project --prefer-dist laravel/laravel blog另外一种方式步骤多。然后中间配置的地方又多&#xff0c;不推荐。 artisan 在Laravel根目录下运行&#xff1…

npm install 报错 npm ERR! code Z_BUF_ERROR 问题解决

问题描述&#xff1a; 使用npm install命令安装依赖时&#xff0c;出现错误&#xff0c;报错信息如下&#xff1a; npm ERR! code Z_BUF_ERROR npm ERR! errno -5 npm ERR! zlib: unexpected end of file解决方式&#xff1a; 使用如下命令安装淘宝镜像后&#xff0c;重新执…

BZOJ——1202: [HNOI2005]狡猾的商人

http://www.lydsy.com/JudgeOnline/problem.php?id1202 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4075 Solved: 1958[Submit][Status][Discuss] Description 刁姹接到一个任务&#xff0c;为税务部门调查一位商人的账本&#xff0c;看看账本是不是伪造的。账本上记录…

ASP.NET禁用视图状态

1、站点禁用视图状态<configuration> <system.web> <pages enableViewState"false"/> </system.web> </configuration>2、页面禁用视图状态<% Page EnableViewState"false" %>转载于:https://www.cnb…

Virtual PC磁盘的最佳压缩方式

随着vpc不断的使用,vpc的磁盘就会一天一天的增大,于是你试着去把那些在vpc上面的软件都删除了,可是发现体积仍然没有什么改观,我还尝试过将系统都格式化了,仍然没有什么太大的变化. 经过苦苦搜寻还是得到了大数人提供的解决办法:首先启动虚拟机进到系统,然后装载母机vpc安装目录…

OO第一次总结

一&#xff0e;基于度量的程序结构分析 在进行分析之前&#xff0c;先解释一下以下几个缩写&#xff1a; LOC&#xff1a;代码行数 CC&#xff1a;圈复杂度&#xff0c;反映了程序中if/while等判定条件的数量&#xff0c;越高意味着代码越可能质量低且难以测试、维护。 PC&…

python学习笔记(一)之入门

1、python的安装 官网下载.exe文件直接安装即可&#xff0c;在安装过程中选择加入环境变量&#xff0c;就不用在安装后再去增添环境变量了。 本文选择的是python3.6版本&#xff0c;没有选择2.7版本。 2、启动python解释器和运行.py文件 安装过程中选择创建桌面图标连接&#x…

丽水风光(二)—劫色“古堰画乡”

丽水风光 &#xff08;二&#xff09; 劫色古堰画乡 驱车从鸥江到古堰画乡大约二十分钟。一路由同学&#xff2c;老弟相陪&#xff0c;车刚停在江边&#xff0c;我就被美景陶醉&#xff0c;撇下老同学&#xff0c;旁若无人地与&#xff38;兄一边卡嚓卡嚓去了&#xff0c;一副“…

爱情神话:庄妃用美色套牢洪承畴之谜

题记&#xff1a;庄妃&#xff0c;一个蒙古族的美丽&#xff0c;用她的美色俘获了大明王朝铁血将军洪承畴之心&#xff0c;不仅为满清开国立下了不世之功&#xff0c;而且也打造了一个千古流传的爱情神话。庄妃&#xff0c;孝庄文皇后&#xff0c;博尔济吉特氏&#xff0c;蒙古…

SQLServer2005数据库自动备份

一。SqlServer自动作业备份 1、打开SQL Server Management Studio 2、启动SQL Server代理 3、点击作业->新建作业 4、"常规"中输入作业的名称 5、新建步骤&#xff0c;类型选T-SQL&#xff0c;在下面的命令中输入下面语句 DECLARE strPath NVARCHAR(200)set strP…

JavaScript Array相关方法

JavaScript 标准内置对象 Array常用方法Array.prototype.every()Array.prototype.some()Array.prototype.filter()Array.prototype.find()Array.prototype.findIndex()Array.prototype.indexOf()Array.prototype.includes()Array.prototype.map()其他1. [JavaScript数组去重](h…

Web API之基于H5客户端分段上传大文件

http://www.cnblogs.com/OneDirection/articles/7285739.html 查询很多资料没有遇到合适的&#xff0c;对于MultipartFormDataStreamProvider 也并是很适合&#xff0c;总会出现问题。于是放弃&#xff0c;使用了传统的InputStream 分段处理完之后做merge处理。 前台分段规则 命…

对MySQL进行逻辑卷备份与恢复

ZRM 我之前我介绍过&#xff0c;这里就不多少了。以下是关于用mysql-zrm 来测试 基于LVM 逻辑卷管理的数据库全库备份。我这里用的是SUN 的VBOX 虚拟机来做的测试&#xff0c;基于Red Hat AS 5.3。1. 先建立逻辑卷。fdisk 我就不介绍了&#xff0c;这里演示下怎么用创建逻辑卷以…

医保退费主要流程

1.系统初始化Init GetInvoiceInfo with QryInvoice dobeginClose;ParamByName(DanJuID).AsString:edtDjid.Text;Open;vJiuZhenID:FieldByName(JiuZhenID).AsInteger;GetClinicInfo(vJiuZhenID);//获得就诊信息pnlDjrq.Caption:FieldByName(SerialNo).AsString;pnlSkr.Caption:F…

oo第一单元总结

第一次作业 第一次作业自己虽然很想向着面向对象的方向上写&#xff0c;但写出来还是很C语言式的程序。从头到尾扫描字符串&#xff0c;扫到加减号便认为接下来是一项&#xff0c;再用正则表达式去分情况匹配出这一项。用Hashmap来存储数据&#xff0c;方便合并同类项。最后套一…

npm run build打包失败

使用npm run build命令打包Angular项目时报错&#xff0c;错误信息如下&#xff1a; WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 3.33 MB.ERROR in budgets, maximum exceeded for initial. Budget 5 MB was exceeded by 340 kB. npm ER…

YII2 models非常好用的控制输出数据【重写Fields】

models里重写Fields真的很好用&#xff0c;用于分类、评论功能 列子&#xff1a;评论表models/Comment.php 1、关联商品表 2、获取父级&#xff08;即管理员&#xff09;评论 public function Fields()//添加parentComment自定义字段输出 { $fields parent::Fields(); $fi…

Visual studio 2005如何实现源码管理

转自CSDN Visual studio 2005如何实现源码管理(Visual Studio .Net团队开发)目录&#xff1a; 〇、 摘要一、 开发前的准备 二、 创建空的SourceSafe数据库 三、 新建项目并加入版本控制 四、 获取SourceSafe中的项目 五、 版本控制的几个概念 六、 版本控制项目的管理 七、 总…