angular 用Observable实现异步调用的方法


Posted in Javascript onDecember 27, 2018

Observable(可观察对象)

Observable(可观察对象)是基于推送(Push)运行时执行(lazy)的多值集合。

拉取(Pull)和推送(Push)

拉取和推送是数据生产者和数据消费者之间通信的两种不同机制。

  • 拉取:在拉取系统中,总是由消费者决定何时从生产者那里获得数据。生产者对数据传递给消费者的时间毫无感知(被动的生产者,主动的消费者)
  • 推送:在推送系统中生产者决定何时向消费者传递数据,消费者对何时收到数据毫无感知(被动的消费者)

js中的Promise和Observable

  • 现代JavaScript中Promise是典型的推送系统。作为数据生产者的Promise通过resolve()向数据消费者——回调函数传递数据:与函数不同,Promise决定向回调函数推送值的时间
  • RxJS在JavaScript中引入了Observable(可观察对象)这个新的推送系统。Observable是多数据值的生产者,向Observer(被动的消费者)推送数据

Observable与函数、promsise

  • 函数是当调用才同步计算,并最终只返回一个值的
  • promise是会或者不会返回一个值
  • Observable是当调用才同步或者异步地计算,并可能产生0到无穷多个值的

Observable是函数概念的拓展

  • Observable就像一个没有参数的函数,并不断生成一些值供我们使用,因此它也像是一个事件发射机(EventEmitters)
  • 在Observable中subscribe就像call一个函数,你订阅它,它才会被'启动'。同一个Observable对于不同的subscribe,是不会共享结果的(通常情况下这样子的,但可以通过调用api来共享)

Observable四大核心

创建

  • Rx.Observable.create是Observable构造函数的别名,接受一个参数:subscribe函数
  • 除了使用create创建Observable,我们通常还使用创建操作符, 如of,from,interval,等来创建Observable

订阅

  • observable.subscribe和Observable.create(function subscribe(observer) {…})中的subscribe不是同一个对象,但在工程中可以在概念上视两者为等价物
  • 调用subscribe的观察者并不会共享同一个Observable
  • 订阅机制与处理事件的addEventListener/removeEventListenerAPI完全不同。通过observable.subscribe,观察者并不需要在Observable中进行注册,Observable也不需要维护订阅者的列表
  • 订阅后便进入了Observable的执行阶段,在执行阶段值和事件将会被传递给观察者供其消费

执行

  • 只有在被订阅之后Observable才会执行,执行的逻辑在Observable.create(function subscribe(observer){…})中描述,执行后将会在特定时间段内,同步或者异步地成产多个数据值
  • Observable在执行过程中,可以推送三种类型的值:
    • “Next” 通知: 实际产生的数据,包括数字、字符串、对象等
    • “Error” 通知:一个JavaScript错误或者异常
    • “Complete” 通知:一个不带有值的事件
  • 在Observable的执行过程中,0个或者多个“Next”通知会被推送
  • 在错误或者完成通知被推送后,Observable不会再推送任何其他通知

终止

  • Observable的执行可能是无限的,作为观察者需要主动中断执行:我们需要特定的API去终止执行过程
  • 因为特定的观察者都有特定的执行过程,一旦观察者获得想要的数据后就需要终止执行过程以免带来计算时对内存资源的浪费
  • 在observable.subscribe被调用时,观察者会与其执行作用域绑定,同时返回一个Subscription类型的对象,通过调用subscription.unsubscribe()你可以终止执行过程

angular 有个类叫Observable。 从名字可以看出它提供一个观察者模式的类似功能。

也就是说,当我们把一个函数的返回值用Observable类包装后, 调用函数的使用方就可以订阅该函数,然后在得到通知后处理后续的事情, 也就是异步的调用过程而不是同步等待。

import { Observable } from 'rxjs/rx';
import { of } from 'rxjs/observable/of';

getHeroes(): Observable<Hero[]> {
this.messageService.add('HeroService: fetched heroes');

return of(HEROES);
}

上面的函数用Observable封装, of强转后就是一个异步的函数, 这样外部在函数完成后调用后续的处理,比如refresh
this.heroService.getHeroes().subscribe(heroes => this.refreshTree(heroes));

参考:

https://stackoverflow.com/questions/37364973/promise-vs-observable
https://angular.cn/tutorial/toh-pt4#observable-data

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 #Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 #Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 #Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 #Javascript
angular6的table组件开发的实现示例
Dec 26 #Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 #Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 #Javascript
You might like
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Face++ API实现手势识别系统设计
2018/11/21 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
python 数据类型强制转换的总结
2021/01/25 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
linux面试相关问题
2012/08/11 面试题
难忘的一课教学反思
2014/04/30 职场文书
假面舞会策划方案
2014/05/29 职场文书
企业员工集体活动方案
2014/08/17 职场文书
个人股份合作协议书
2014/10/24 职场文书
幼师小班个人总结
2015/02/12 职场文书
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL