---
# System prepended metadata

title: Angular Rxjs
tags: [Angular]

---

---
tags: Angular
title: Angular Rxjs
description: 敘述基本運用Rxjs向Server端 發起請求
---

# 淺談Angular 與 Rxjs 應用

**概述**
在Web端的世界裡面,取任何資源都是同步(Async)的,比如我們希望可以顯示資料庫的東西,必須先向Server端提取資料,等檔案回來之後再放到前端頁面上,這就是同步的行為,但是隨著網頁端越來越複雜的程式碼,我們所寫的Javascript,有各種不同非同步的寫法,比如callback 或是 Promise 物件甚至是新的語法糖 async/await,而今天我要來說的就是RxJs


在處理非同步的需求中,我們時常會遇到許多問題,比如RaceCondition,Memory Leak,Exception Handling
透過RxJs這樣的套件庫,我們可以輕易解決上述的問題,透過簡潔的寫法,讓程式碼能更增加可易讀型



**Rxjs基本介紹**

Reactive Extensive,縮寫為Reactive Ｘ
Rx有非常多的版本,其中Javascript的版本就叫做RxJs
RxJs主要是用來處理非同步事件的Javascript函式庫

在了解RxJs之前,一定要先了解以下RxJs的核心概念

- Observable      
    - 可觀察物件：代表未來會發生事件的事件資料
- Observe          
    - 觀察者物件：用來接收『觀察結果』 的物件
- Subscription    
    - 訂閱物件：代表正在執行的物件
- Operater
    - 運算物件：用來處理一系列的資料運算

一句話解釋：Observable是一個可以被觀察的物件,當Observable發生事件時,Observe會去執行,回傳一個Subscription,可以利用Operater去做運算



**利用Rxjs 向Server 端發起請求**

以下我們會透過Angular與RxJs結合,來向後端發起一個完整的API


第一步：先在建起一個Service 做一個 方法回傳Observable

RxJs 建立觀察物件

---
![](https://i.imgur.com/ZqMCuNV.png)

---

第二步：在Component裡面開一個方法,呼叫Service,接著訂閱這個Observable

RxJs 進行非同步請求

---

![](https://i.imgur.com/YmfSzdx.png)

---


第三步：做一個錯誤處理,RxJs這裡有提供一個錯誤處理的方式,可以利用類似try catch的動作做錯誤處理

RxJs 進行錯誤處理

---

![](https://i.imgur.com/ITUvEK7.png)

---

第四步:別忘了要關閉資料流防止記憶體外洩

RxJs 防止記憶體外洩


---


總結:
RxJs函式庫幫我們網頁中非同步的請求做了許多簡化的程式碼,讓非同步的請求變得更簡單也更容易






