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 23 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 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
多重?l件?合查?(二)
2006/10/09 PHP
php学习之流程控制实现代码
2011/06/09 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
python中的yield使用方法
2014/02/11 Python
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python Socket传输文件示例
2017/01/16 Python
python图像常规操作
2017/11/11 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
化学教学随笔感言
2014/02/19 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫