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 ——
Angular 可观察对象(Observable)相关推荐
- Angular RxJS入门笔记 (Observable可观察对象、Subscribe订阅、Observer观察者、Subscription对象)
RxJS入门笔记,关于Observable可观察对象.Observer观察者.Subscribe订阅,Subscription Observable可观察对象 Observer观察者 总结整体 本笔记 ...
- rxjava 观察者模式_RxJava可观察对象和观察者
rxjava 观察者模式 In this tutorials, we'll be discussing RxJava Observables and Observers in length. We'l ...
- 将选择元素绑定到Angular中的对象
本文翻译自:Binding select element to object in Angular I'd like to bind a select element to a list of obj ...
- UG NX 12 观察对象显示
在使用UG NX 12建模的过程中,在绘图区中对点.线.实体.特征.线型.颜色以及网格线等对象的编辑或修改统称为对象的操作.本节将介绍对象的观察显示.隐藏对象.删除与恢复对象等相关操作. 观察对象显示 ...
- 通过一个最简单的例子,理解Angular rxjs里的Observable对象的pipe方法
源代码: import { of } from 'rxjs'; import { Injectable } from '@angular/core'; import { map } from 'rxj ...
- javafx阴影_JavaFX技巧来节省内存! 属性和可观察对象的阴影场
javafx阴影 在 JavaFX的世界中, Properties API允许UI开发人员将值绑定到UI控件. 这种功能出奇的简单,但是当对象模型经常使用属性时,应用程序可能会很快耗尽内存. 我通常会 ...
- 优雅のJava(五)—— 优雅的观察对象与订阅信息 观察者模式 好莱坞原则
文章目录 专栏导航 前言 好莱坞原则 工厂模式的思路借鉴 IOC的思路借鉴 问题核心 即时通讯的思路借鉴 GUI设计上的思路借鉴 后记 专栏导航 优雅のJava(零)-- 面向问题的学习 前言 这篇主 ...
- Vue观察对象的子属性变化,wacth的deep使用
我们都已经知道,如何观察一个属性值的变化,然后做相应的操作.比如我有一个属性name,我希望在name改变的时候,弹出消息框. 代码如下: <template><div id=&qu ...
- Angular Js 判断对象不为空对象的三种方法
前言 在写前端时,很多时候都需要去校验后端返回的数据是否是个空对象.这里就介绍三种方法 第一种 //将json对象转化为json字符串,再判断该字符串是否为"{}" JSON.st ...
最新文章
- 1.2W 字的 SQL 语法速成手册
- Java用户账号和密码登录
- 初始化java工具失败,spring初始化失败解决办法
- hive 时间转字符串_2. HIVE 基本操作
- 个人阅读 代码大全的阅读与提问
- Zuul指定Path+url以及指定可用的服务节点时如何负载均衡
- android 卡片放大变详情页,ConstraintLayout动画实现布局卡片式滑动放大缩放
- python筛选法求素数讲解_埃氏筛选法求素数 Python
- xhost和XServer相关概念汇总
- Mysql 新增用户可访问指定数据库所有权限
- Object.assign()怎么用?
- python可以调用windows资源吗_在Windows中使用Python设置文件夹权限
- JavaScript实用手册
- Win 10系统自动备份文件
- 互融云贷款中介平台搭建,助力企业实现数字化智能办公
- spidev0.0的正确打开方式
- oracle数据库表数据误删除恢复
- 京东面试官:给我说说你简历上的订单系统是如何设计的?尽量详细点~
- python学习13:分解质因数
- 9000字深度详解华为绩效管理体系