angular 用Observable實(shí)現(xiàn)異步調(diào)用的方法

更新時(shí)間：2018年12月27日 09:43:31 作者：muzizongheng

這篇文章主要介紹了angular 用Observable實(shí)現(xiàn)異步調(diào)用的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Observable(可觀察對(duì)象)

Observable（可觀察對(duì)象）是基于推送（Push）運(yùn)行時(shí)執(zhí)行（lazy）的多值集合。

拉取(Pull)和推送(Push)

拉取和推送是數(shù)據(jù)生產(chǎn)者和數(shù)據(jù)消費(fèi)者之間通信的兩種不同機(jī)制。

拉?。涸诶∠到y(tǒng)中，總是由消費(fèi)者決定何時(shí)從生產(chǎn)者那里獲得數(shù)據(jù)。生產(chǎn)者對(duì)數(shù)據(jù)傳遞給消費(fèi)者的時(shí)間毫無感知（被動(dòng)的生產(chǎn)者，主動(dòng)的消費(fèi)者）
推送：在推送系統(tǒng)中生產(chǎn)者決定何時(shí)向消費(fèi)者傳遞數(shù)據(jù)，消費(fèi)者對(duì)何時(shí)收到數(shù)據(jù)毫無感知（被動(dòng)的消費(fèi)者）

js中的Promise和Observable

現(xiàn)代JavaScript中Promise是典型的推送系統(tǒng)。作為數(shù)據(jù)生產(chǎn)者的Promise通過resolve()向數(shù)據(jù)消費(fèi)者——回調(diào)函數(shù)傳遞數(shù)據(jù)：與函數(shù)不同，Promise決定向回調(diào)函數(shù)推送值的時(shí)間
RxJS在JavaScript中引入了Observable(可觀察對(duì)象)這個(gè)新的推送系統(tǒng)。Observable是多數(shù)據(jù)值的生產(chǎn)者，向Observer(被動(dòng)的消費(fèi)者)推送數(shù)據(jù)

Observable與函數(shù)、promsise

函數(shù)是當(dāng)調(diào)用才同步計(jì)算，并最終只返回一個(gè)值的
promise是會(huì)或者不會(huì)返回一個(gè)值
Observable是當(dāng)調(diào)用才同步或者異步地計(jì)算，并可能產(chǎn)生0到無窮多個(gè)值的

Observable是函數(shù)概念的拓展

Observable就像一個(gè)沒有參數(shù)的函數(shù)，并不斷生成一些值供我們使用，因此它也像是一個(gè)事件發(fā)射機(jī)(EventEmitters)
在Observable中subscribe就像call一個(gè)函數(shù)，你訂閱它，它才會(huì)被'啟動(dòng)'。同一個(gè)Observable對(duì)于不同的subscribe，是不會(huì)共享結(jié)果的(通常情況下這樣子的，但可以通過調(diào)用api來共享)

Observable四大核心

創(chuàng)建

Rx.Observable.create是Observable構(gòu)造函數(shù)的別名，接受一個(gè)參數(shù)：subscribe函數(shù)
除了使用create創(chuàng)建Observable，我們通常還使用創(chuàng)建操作符, 如of，from，interval,等來創(chuàng)建Observable

observable.subscribe和Observable.create(function subscribe(observer) {…})中的subscribe不是同一個(gè)對(duì)象，但在工程中可以在概念上視兩者為等價(jià)物
調(diào)用subscribe的觀察者并不會(huì)共享同一個(gè)Observable
訂閱機(jī)制與處理事件的addEventListener/removeEventListenerAPI完全不同。通過observable.subscribe，觀察者并不需要在Observable中進(jìn)行注冊(cè)，Observable也不需要維護(hù)訂閱者的列表
訂閱后便進(jìn)入了Observable的執(zhí)行階段，在執(zhí)行階段值和事件將會(huì)被傳遞給觀察者供其消費(fèi)

執(zhí)行

只有在被訂閱之后Observable才會(huì)執(zhí)行，執(zhí)行的邏輯在Observable.create(function subscribe(observer){…})中描述，執(zhí)行后將會(huì)在特定時(shí)間段內(nèi)，同步或者異步地成產(chǎn)多個(gè)數(shù)據(jù)值
Observable在執(zhí)行過程中，可以推送三種類型的值：
- “Next” 通知：實(shí)際產(chǎn)生的數(shù)據(jù)，包括數(shù)字、字符串、對(duì)象等
- “Error” 通知：一個(gè)JavaScript錯(cuò)誤或者異常
- “Complete” 通知：一個(gè)不帶有值的事件
在Observable的執(zhí)行過程中，0個(gè)或者多個(gè)“Next”通知會(huì)被推送
在錯(cuò)誤或者完成通知被推送后，Observable不會(huì)再推送任何其他通知

終止

Observable的執(zhí)行可能是無限的，作為觀察者需要主動(dòng)中斷執(zhí)行：我們需要特定的API去終止執(zhí)行過程
因?yàn)樘囟ǖ挠^察者都有特定的執(zhí)行過程，一旦觀察者獲得想要的數(shù)據(jù)后就需要終止執(zhí)行過程以免帶來計(jì)算時(shí)對(duì)內(nèi)存資源的浪費(fèi)
在observable.subscribe被調(diào)用時(shí)，觀察者會(huì)與其執(zhí)行作用域綁定，同時(shí)返回一個(gè)Subscription類型的對(duì)象，通過調(diào)用subscription.unsubscribe()你可以終止執(zhí)行過程

angular 有個(gè)類叫Observable。從名字可以看出它提供一個(gè)觀察者模式的類似功能。

也就是說，當(dāng)我們把一個(gè)函數(shù)的返回值用Observable類包裝后，調(diào)用函數(shù)的使用方就可以訂閱該函數(shù)，然后在得到通知后處理后續(xù)的事情，也就是異步的調(diào)用過程而不是同步等待。

import { Observable } from 'rxjs/rx';
import { of } from 'rxjs/observable/of';

getHeroes(): Observable<Hero[]> {
this.messageService.add('HeroService: fetched heroes');

return of(HEROES);
}

上面的函數(shù)用Observable封裝， of強(qiáng)轉(zhuǎn)后就是一個(gè)異步的函數(shù)，這樣外部在函數(shù)完成后調(diào)用后續(xù)的處理，比如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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: