亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2018年12月27日 09:43:31   作者:muzizongheng  
這篇文章主要介紹了angular 用Observable實現(xiàn)異步調(diào)用的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

Observable(可觀察對象)

Observable(可觀察對象)是基于推送(Push)運行時執(zhí)行(lazy)的多值集合。

拉取(Pull)和推送(Push)

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

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

js中的Promise和Observable

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

Observable與函數(shù)、promsise

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

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

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

Observable四大核心

創(chuàng)建

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

訂閱

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

執(zhí)行

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

終止

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

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

也就是說,當(dāng)我們把一個函數(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)后就是一個異步的函數(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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • angularjs中的$eval方法詳解

    angularjs中的$eval方法詳解

    下面小編就為大家?guī)硪黄猘ngularjs中的$eval方法詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • Angular中樣式綁定解決方案

    Angular中樣式綁定解決方案

    這篇文章主要介紹了Angular中樣式綁定解決方案,使用ngClass和ngStyle可以進(jìn)行樣式的綁定,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08
  • Angular中的interceptors攔截器

    Angular中的interceptors攔截器

    這篇文章主要介紹了Angular中的interceptors攔截器,需要的朋友可以參考下
    2017-06-06
  • angular ngClick阻止冒泡使用默認(rèn)行為的方法

    angular ngClick阻止冒泡使用默認(rèn)行為的方法

    這篇文章主要介紹了angular ngClick阻止冒泡使用默認(rèn)行為的方法,較為詳細(xì)的分析了AngularJS中ngClick事件執(zhí)行原理與阻止冒泡的實現(xiàn)技巧,需要的朋友可以參考下
    2016-11-11
  • AngularJS基礎(chǔ) ng-disabled 指令詳解及簡單示例

    AngularJS基礎(chǔ) ng-disabled 指令詳解及簡單示例

    本文主要介紹AngularJS ng-disabled 指令,這里幫大家整理了ng-disabled指令的基礎(chǔ)指令,并附示例代碼,有需要的小伙伴參考下
    2016-08-08
  • Angular實現(xiàn)預(yù)加載延遲模塊的示例

    Angular實現(xiàn)預(yù)加載延遲模塊的示例

    本篇文章主要介紹了Angular實現(xiàn)預(yù)加載延遲模塊的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • AngularJS 模塊化詳解及實例代碼

    AngularJS 模塊化詳解及實例代碼

    這篇文章主要介紹了AngularJS 模塊化,這里整理了詳細(xì)的資料及簡單實例代碼,實現(xiàn)效果圖,有需要的小伙伴可以參考下
    2016-09-09
  • Angular實現(xiàn)form自動布局

    Angular實現(xiàn)form自動布局

    這篇文章主要介紹了Angular實現(xiàn)form自動布局的相關(guān)資料,以代碼片段的形式分析了Angular實現(xiàn)form自動布局的實現(xiàn)方法,感興趣的小伙伴們可以參考一下
    2016-01-01
  • Angular CLI 使用教程指南參考小結(jié)

    Angular CLI 使用教程指南參考小結(jié)

    這篇文章主要介紹了Angular CLI 使用教程指南參考小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • Angular2使用jQuery的方法教程

    Angular2使用jQuery的方法教程

    這篇文章主要給大家介紹了關(guān)于Angular2使用jQuery的方法教程,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-05-05

最新評論