首頁  >  文章  >  web前端  >  淺析Angular中的可觀察物件、觀察者和RxJS操作符

淺析Angular中的可觀察物件、觀察者和RxJS操作符

青灯夜游
青灯夜游轉載
2022-01-10 19:10:332289瀏覽

本篇文章帶大家了解Angular中的可觀察物件(Observable)、觀察者(observer)和RxJS操作符,希望對大家有幫助!

淺析Angular中的可觀察物件、觀察者和RxJS操作符

Observable(可觀察對象)

#Observable(可觀察對象),是RxJS##庫裡面的一個對象,可以用來處理非同步事件,例如HTTP請求(實際上,在Angular中,所有的HTTP請求返回的都是Observable)。 【相關教學推薦:《angular教學》】

#或許,你以前接觸過一個叫promise的東西,它們本質上面是相同的:都是生產者主動向消費者「push」產品,而消費者是被動接收的,但是他們兩者還是有很大區別的:Observable可以發送任意多值,並且,在被訂閱之前,它是不會執行的!這是promise不具備的特質。

  • Observable用於在發送方和接收方之間傳輸訊息,你可以將這些訊息看成是流
  • 在創建Observable 物件時,需要傳入一個函式作為建構函式的參數,而這個函式叫訂閱者函式,這個函式也就是生產者向消費者推播訊息的地方
  • 在被消費者subscribe(訂閱)之前,訂閱者函數不會被執行,直到subscribe()函數被調用,該函數返回一個subscription對象,裡面有一個unsubscribe()函數,消費者可以隨時拒絕訊息的接收!
  • subscribe()函數接收一個observer(觀察者)物件作為入參
  • 訊息的傳送可以是同步的,也可以是非同步的

observer(觀察者)

有了可觀察物件(發送方),就需要一個觀察者(接收者) 來觀察可觀察對象,觀察者要實現observer接口,它是一個對象,其中包含三個屬性,它們都是函數,如下:

通知類型 說明
next #必要。以接收的值作為入參,在正常情況下執行。可能執行零次或多次。
error 可選。出錯的情況下執行。錯誤會中斷這個可觀察物件實例的執行過程。
complete 可選。傳輸完成的情況下執行。

訂閱

只有當有人訂閱 Observable 的實例時,它才會開始發佈值。訂閱時要先呼叫可觀察物件的 subscribe() 方法,並把一個觀察者物件傳給它,用來接收通知。如下:

為了展示訂閱的原理,需要先建立新的可觀察物件。它有一個建構函式可以用來建立新實例,但是為了更簡明,也可以使用Observable 上定義的一些靜態方法來建立一些常用的簡單可觀察物件:

  • ##of(...items) :傳回一個Observable 實例,它用同步的方式把參數中提供的這些值一個一個送到。
  • from(iterable) : 把它的參數轉換成一個 Observable 實例。此方法通常用來把一個陣列轉換成一個(發送多個值的)可觀察物件。
import { of } from "rxjs";
// 1、通过 of() 方法返回一个可观察对象,并准备将1,2,3三个数据发送出去
const observable = of(1, 2, 3);	
// 2、实现 observer 接口,观察者
const observer = {	
	next: (num: number) => console.log(num),
	error: (err: Error) => console.error('Observer got an error: ' + err),
  	complete: () => console.log('Observer got a complete notification'), 
}
// 3、订阅。调用可观察对象的 subscribe() 方法订阅,subscribe() 方法中传入的对象就是一个观察者
observable.subscribe(observer);
運行結果如下:


# 上面訂閱的寫法可以直接改為如下:參數不是物件

observable.subscribe(
  num => console.log(num),
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);

訂閱者函數

在上面的範例中使用的是

of()方法來建立可觀察對象,這節使用建構函式建立可觀察對象。

Observable 建構子可以建立任何類型的可觀察流。當執行可觀察物件的 subscribe() 方法時,這個建構函式就會把它接收到的參數當作訂閱函式來運作。訂閱函數會接收一個 Observer 對象,並且把值發佈給觀察者的 next()方法。

// 1、自定义订阅者函数
function sequenceSubscriber(observer: Observer<number>) {
  observer.next(1);	// 发送数据
  observer.next(2);	// 发送数据
  observer.next(3);	// 发送数据
  observer.complete();
  return {unsubscribe() {}};
}

// 2、通过构造函数创建一个新的可观察对象,参数就是一个订阅者函数
const sequence = new Observable(sequenceSubscriber);

// 3、订阅
sequence.subscribe({
  next(num) { console.log(num); },	// 接受数据
  complete() { console.log(&#39;Finished sequence&#39;); }
});
運行結果如下:


淺析Angular中的可觀察物件、觀察者和RxJS操作符

#上面一個範例示範如何自訂訂閱函數,那麼既然可以自訂訂閱者函數,我們就可以

將非同步程式碼封裝進可觀察物件的訂閱者函數中,待非同步程式碼執行完再發送資料。如下:

import { Observable } from &#39;rxjs&#39;
// 异步函数
function fn(num) {
    return new Promise((reslove, reject) => {
        setTimeout(() => {
            num++
            reslove(num)
        }, 1000)
    })
}
// 创建可观察对象,并传入订阅者函数
const observable = new Observable((x) => {
    let num = 1
    fn(num).then(
    	res => x.next(res)	// 异步代码执行完成,发送数据
    ) 
})
// 订阅,接收数据,可以改为链式调用
observable.subscribe(data => console.log(data))	// 2

多播

https://angular.cn/guide/observables#multicasting

RxJS運算子

我們可以使用一系列的

RxJS操作符,在這些訊息被接收方接收之前,對它們進行一系列的處理、轉換,因為這些操作符都是純函數。

import { of } from &#39;rxjs&#39;;
import { map } from &#39;rxjs/operators&#39;;
// 1、创建可观察对象,并发送数据
const nums = of(1, 2, 3);
// 2、创建函数以接受可观察对象
const squareValues = map((val: number) => val * val);
const squaredNums = squareValues(nums);

squaredNums.subscribe(x => console.log(x));

上面的方式我看不懂且難以接受,一般常用下面這種,使用

pipe把多個運算子連結起來

import { map, Observable, filter } from &#39;rxjs&#39;

// 创建可观察对象,并传入订阅者函数
const observable = new Observable((x) => {
    x.next(1)
    x.next(2)
    x.next(3)
    x.next(4)
}).pipe(
    map(value => value*100),		// 操作符
    filter(value => value == 200)	// 操作符
)
.subscribe(data => console.log(data))	// 200

錯誤處理

RxJS 也提供了catchError 操作符,它允許你在管道中處理已知錯誤。 假設你有一個可觀察對象,它會發起 API 請求,然後對伺服器返回的回應進行映射。如果伺服器回傳了錯誤或值不存在,就會產生一個錯誤。如果你捕獲這個錯誤並提供了一個預設值,流就會繼續處理這些值,而不會報錯。如下:

import { map, Observable, filter, catchError, of } from &#39;rxjs&#39;

const observable = new Observable((x) => {
        x.next(1)	// 发送数据 1 和 2
        x.next(2)
}).pipe(
    map(value => {
        if (value === 1) {	// 1、当发送的数据为 1 时,将其乘以 100
            return value*100
        } else {	// 2、否则抛出错误
            throw new Error(&#39;抛出错误&#39;);
        }
    }),
    // 3、此处捕获错误并处理错误,对外发送数据 0
    catchError((err) => {
        console.log(err)
        return of(0)
    })
)
.subscribe(
    data => console.log(data),
    // 4、由于上面抛出的错误被 catchError 操作符处理(重新发送数据)了,所以这里能顺利订阅到数据而不报错
    err => console.log(&#39;接受不到数据:&#39;, err)
)

最後的運行結果如下:

淺析Angular中的可觀察物件、觀察者和RxJS操作符

#更多程式相關知識,請造訪:

程式設計影片! !

以上是淺析Angular中的可觀察物件、觀察者和RxJS操作符的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除