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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
微信小程序request请求封装,验签代码实例
Dec 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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
php读取本地json文件的实例
2018/03/07 PHP
判断滚动条到底部的JS代码
2013/11/04 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
error和exception有什么区别
2012/10/02 面试题
Shell脚本如何向终端输出信息
2014/04/25 面试题
4s店总经理岗位职责
2013/12/31 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
罚款通知怎么写
2015/04/22 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis
SQL SERVER触发器详解
2022/02/24 SQL Server