可观察对象(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)相关推荐

  1. Angular RxJS入门笔记 (Observable可观察对象、Subscribe订阅、Observer观察者、Subscription对象)

    RxJS入门笔记,关于Observable可观察对象.Observer观察者.Subscribe订阅,Subscription Observable可观察对象 Observer观察者 总结整体 本笔记 ...

  2. rxjava 观察者模式_RxJava可观察对象和观察者

    rxjava 观察者模式 In this tutorials, we'll be discussing RxJava Observables and Observers in length. We'l ...

  3. 将选择元素绑定到Angular中的对象

    本文翻译自:Binding select element to object in Angular I'd like to bind a select element to a list of obj ...

  4. UG NX 12 观察对象显示

    在使用UG NX 12建模的过程中,在绘图区中对点.线.实体.特征.线型.颜色以及网格线等对象的编辑或修改统称为对象的操作.本节将介绍对象的观察显示.隐藏对象.删除与恢复对象等相关操作. 观察对象显示 ...

  5. 通过一个最简单的例子,理解Angular rxjs里的Observable对象的pipe方法

    源代码: import { of } from 'rxjs'; import { Injectable } from '@angular/core'; import { map } from 'rxj ...

  6. javafx阴影_JavaFX技巧来节省内存! 属性和可观察对象的阴影场

    javafx阴影 在 JavaFX的世界中, Properties API允许UI开发人员将值绑定到UI控件. 这种功能出奇的简单,但是当对象模型经常使用属性时,应用程序可能会很快耗尽内存. 我通常会 ...

  7. 优雅のJava(五)—— 优雅的观察对象与订阅信息 观察者模式 好莱坞原则

    文章目录 专栏导航 前言 好莱坞原则 工厂模式的思路借鉴 IOC的思路借鉴 问题核心 即时通讯的思路借鉴 GUI设计上的思路借鉴 后记 专栏导航 优雅のJava(零)-- 面向问题的学习 前言 这篇主 ...

  8. Vue观察对象的子属性变化,wacth的deep使用

    我们都已经知道,如何观察一个属性值的变化,然后做相应的操作.比如我有一个属性name,我希望在name改变的时候,弹出消息框. 代码如下: <template><div id=&qu ...

  9. Angular Js 判断对象不为空对象的三种方法

    前言 在写前端时,很多时候都需要去校验后端返回的数据是否是个空对象.这里就介绍三种方法 第一种 //将json对象转化为json字符串,再判断该字符串是否为"{}" JSON.st ...

最新文章

  1. 1.2W 字的 SQL 语法速成手册
  2. Java用户账号和密码登录
  3. 初始化java工具失败,spring初始化失败解决办法
  4. hive 时间转字符串_2. HIVE 基本操作
  5. 个人阅读 代码大全的阅读与提问
  6. Zuul指定Path+url以及指定可用的服务节点时如何负载均衡
  7. android 卡片放大变详情页,ConstraintLayout动画实现布局卡片式滑动放大缩放
  8. python筛选法求素数讲解_埃氏筛选法求素数 Python
  9. xhost和XServer相关概念汇总
  10. Mysql 新增用户可访问指定数据库所有权限
  11. Object.assign()怎么用?
  12. python可以调用windows资源吗_在Windows中使用Python设置文件夹权限
  13. JavaScript实用手册
  14. Win 10系统自动备份文件
  15. 互融云贷款中介平台搭建,助力企业实现数字化智能办公
  16. spidev0.0的正确打开方式
  17. oracle数据库表数据误删除恢复
  18. 京东面试官:给我说说你简历上的订单系统是如何设计的?尽量详细点~
  19. python学习13:分解质因数
  20. 9000字深度详解华为绩效管理体系

热门文章

  1. C++的STL 栈 实现四则运算
  2. 记录一个比较完整的python项目分析架构
  3. c潭州课堂25班:Ph201805201 MySQL第二课 (课堂笔记)
  4. img-responsive class图片响应式
  5. 《对软件工程课程的期望》
  6. 虚拟机下CentOS 6.5配置IP地址的三种方法
  7. 微软极品Sysinternals Suite工具包使用指南
  8. 比较全的字符串验证类,有人顶的话以后继续发
  9. Javascript到PHP加密通讯的简单实现
  10. DataGrid鼠标事件处理