本篇文章帶大家了解Angular中的可觀察物件（Observable）、觀察者（observer）和RxJS操作符，希望對大家有幫助！
#Observable(可觀察對象)，是RxJS##庫裡面的一個對象，可以用來處理非同步事件，例如HTTP請求（實際上，在Angular中，所有的HTTP請求返回的都是Observable）。 【相關教學推薦：《angular教學》】
#或許，你以前接觸過一個叫promise的東西，它們本質上面是相同的：都是生產者主動向消費者「push」產品，而消費者是被動接收的，但是他們兩者還是有很大區別的：Observable可以發送任意多值，並且，在被訂閱之前，它是不會執行的！這是promise不具備的特質。
Observable用於在發送方和接收方之間傳輸訊息，你可以將這些訊息看成是流Observable 物件時，需要傳入一個函式作為建構函式的參數，而這個函式叫訂閱者函式，這個函式也就是生產者向消費者推播訊息的地方subscribe（訂閱）之前，訂閱者函數不會被執行，直到subscribe()函數被調用，該函數返回一個subscription對象，裡面有一個unsubscribe()函數，消費者可以隨時拒絕訊息的接收！ subscribe()函數接收一個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('Finished sequence'); } });登入後複製
將非同步程式碼封裝進可觀察物件的訂閱者函數中，待非同步程式碼執行完再發送資料。如下：
import { Observable } from 'rxjs'
// 异步函数
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)) // 2https://angular.cn/guide/observables#multicastingRxJS運算子我們可以使用一系列的
RxJS操作符，在這些訊息被接收方接收之前，對它們進行一系列的處理、轉換，因為這些操作符都是純函數。
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
// 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 'rxjs'
// 创建可观察对象，并传入订阅者函数
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)) // 200RxJS 也提供了catchError 操作符，它允許你在管道中處理已知錯誤。 假設你有一個可觀察對象，它會發起 API 請求，然後對伺服器返回的回應進行映射。如果伺服器回傳了錯誤或值不存在，就會產生一個錯誤。如果你捕獲這個錯誤並提供了一個預設值，流就會繼續處理這些值，而不會報錯。如下：
import { map, Observable, filter, catchError, of } from 'rxjs'
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('抛出错误');
}
}),
// 3、此处捕获错误并处理错误，对外发送数据 0
catchError((err) => {
console.log(err)
return of(0)
})
)
.subscribe(
data => console.log(data),
// 4、由于上面抛出的错误被 catchError 操作符处理（重新发送数据）了，所以这里能顺利订阅到数据而不报错
err => console.log('接受不到数据：', err)
)
程式設計影片！ ！
以上是淺析Angular中的可觀察物件、觀察者和RxJS操作符的詳細內容。更多資訊請關注PHP中文網其他相關文章！
