这篇文章主要介绍了angular 用Observable实现异步调用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
微软承认Win10存在严重NTFS漏洞:解压缩包等会损坏硬盘

微软承认Win10存在严

现在微软证实了这个消息,并且表示,会在后续的更新中修复
滴滴在北京已完成46787名司机接种疫苗 预约接种超10万人

滴滴在北京已完成4678

截止1月16日14点,在防疫部门的指导部署下,已完成46787名
高德打车北京升级疫情防控:要求合作平台完成驾驶员全员接种疫苗

高德打车北京升级疫情

为严格执行北京新冠肺炎疫情防控要求,保障广大驾驶员和
Uber计划分拆Postmates旗下快递机器人部门

Uber计划分拆Postmate

据Tech Crunch报道,Uber计划分拆旗下的快递机器人部门P
华为将开设海外最大旗舰店:选址沙特

华为将开设海外最大旗

中国科技公司华为计划在利雅得开设一家旗舰店,这是华为
巴菲特获权证可折价买入2307.69万股传媒公司股票

巴菲特获权证可折价买

伯克希尔·哈撒韦向SEC提交的信息披露报告,巴菲特获权
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,