---
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 建立觀察物件

---

---

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

RxJs 進行非同步請求

---


---

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

RxJs 進行錯誤處理

---


---

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

RxJs 防止記憶體外洩

---

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