怎么在angular中使用Observable實現一個異步調用功能

本篇文章給大家分享的是有關怎么在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));

以上就是怎么在angular中使用Observable實現一個異步調用功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。