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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
详解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
日本十大惊悚动漫
2020/03/04 日漫
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
PHP学习之数组值的操作
2011/04/17 PHP
php实现rc4加密算法代码
2012/04/25 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
用JS实现选项卡
2020/03/23 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
python实现查询IP地址所在地
2015/03/29 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
使用python模拟高斯分布例子
2019/12/09 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
护理专科自荐书范文
2014/02/18 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
停车场管理协议书范本
2014/10/08 职场文书
国家助学金感谢信
2015/01/21 职场文书
村官个人总结范文
2015/03/03 职场文书
2015入党自传格式范文
2015/06/26 职场文书