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 相关文章推荐
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 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中使用XML
2006/10/09 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
Python 多线程实例详解
2017/03/25 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python实现微信自动回复机器人功能
2019/07/11 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
公司出纳岗位职责
2013/12/07 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
六年级情感作文之500字
2019/10/23 职场文书