RxJS是一種針對異步數據流編程工具,或者叫響應式擴展編程;可不管如何解釋RxJS其目標就是異步編程,Angular引入RxJS為了就是讓異步可控、更簡單。
而今就是要探討什么是Observable、observer、operator、Submit、EventEmmit,以及如何去使用它們。
什么是Observable?
Observable只是一個普通函數,要想讓他有所作為,就需要跟observer一起使用;前者是受后者是攻。而這個observer(后面我們會介紹)只是一個帶有 next、error、complete 的簡單對象而已。最后,還需要通過 subscribe 訂閱來啟動Observable;否則它是不會有任何反應;可以理解為陌*為了他們能在一起而提供的環境,而訂閱也會返回一個可用于取消操作(在RxJS里叫 unsubscribe)。
當Observable設置觀察者后,而連接并獲取原始數據的這個過程叫生產者,可能是DOM中的 click 事件、input 事件、或者更加復雜的HTTP通信。
為了更好理解,先從一個簡單的示例開始:
import { Component } from '@angular/core';import { Observable, Subscription } from 'rxjs';@Component({ selector: 'app-home', template: `<input type="text"> `})export class HomeComponent { ngOnInit() { const node = document.querySelector('input[type=text]'); // 第二個參數 input 是事件名,對于input元素有一個 oninput 事件用于接受用戶輸入 const input$ = Observable.fromEvent(node, 'input'); input$.subscribe({ next: (event: any) => console.log(`You just typed ${event.target.value}!`), error: (err) => console.log(`Oops... ${err}`), complete: () => console.log(`Complete!`) }); }}示例中 Observable.fromEvent() 會返回一個Observable,并且監聽 input 事件,當事件被觸發后會發送一個 Event 給對應的observer觀察者。
什么是observer?
observer非常簡單,像上面示例中 subscribe 訂閱就是接收一個 observer 方法。
一般在Angular我們 subscribe 會這么寫:
input$.subscribe((event: any) => {});從語法角度來講和 subscribe({ next, error, complete }) 是一樣的。
當Observable產生一個新值時,會通知 observer 的 next(),而當捕獲失敗可以調用 error()。
當Observable被訂閱后,除非調用observer的 complete() 或 unsubscribe() 取消訂閱兩情況以外;會一直將值傳遞給 observer。
Observable的生產的值允許經過一序列格式化或操作,最終得到一個有價值的數據給觀察者,而這一切是由一序列鏈式operator來完成的,每一個operator都會產生一個新的Observable。而我們也稱這一序列過程為:流。
什么是operator?
正如前面說到的,Observable可以鏈式寫法,這意味著我們可以這樣:
Observable.fromEvent(node, 'input') .map((event: any) => event.target.value) .filter(value => value.length >= 2) .subscribe(value => { console.log(value); });
新聞熱點
疑難解答
圖片精選