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中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
桌面中心(三)修改数据库
2006/10/09 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
解析php常用image图像函数集
2013/06/24 PHP
php函数与传递参数实例分析
2014/11/15 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
用python处理MS Word的实例讲解
2018/05/08 Python
基于Python函数和变量名解析
2019/07/19 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
《尊严》教学反思
2014/02/11 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
市场调查策划方案
2014/06/10 职场文书
联谊活动总结
2014/08/28 职场文书
运动会广播稿200字
2015/08/19 职场文书
小学班级口号大全
2015/12/25 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
详解在OpenCV中如何使用图像像素
2022/03/03 Python