非同步 (asynchronous) 與串流 (stream)，是程式開發時經常必須面對的議題，各自有各自解決的問題，也各自都有其帶來的延伸問題，今天就先來對這兩個東西有基礎的理解吧！

在昨天的文章最後我們出了一個「簡易計數器」的練習，今天就來看看該如何實作這些功能吧！

昨天我們學會了如何開始將專案加入 RxJS，今天讓我們從頭開始，認識一下基本的 RxJS 起手式吧！

要開始練習 RxJS，當然要先準備好一個可以開始使用 RxJS 的環境，本篇文章會以完全沒接觸過 RxJS 為假設，介紹幾種起始的環境準備方式，當然對於已經有撰寫 RxJS 經驗的朋友來說，可以依照自己原來的使用習慣，這篇文章參考參考就好，不一定要跟我用一樣的環境囉。

RxJS 是 ReactiveX (又稱 Reactive Extensions，簡稱 Rx) 這個概念的 JavaScript 實現版本；而 ReactiveX 本身的概念是透過組合一些常用的程式技巧，來處理**「非同步」及「串流(或事件)」**情境容易變得很複雜的問題，讓寫出來的程式碼更好理解、也更容易維護。

儘管在近幾年 RxJS 的能見度已經越來越高，但許多人初進入 RxJS 世界就因為它太過抽象，而提早登出；甚至遇過客戶外包時因為害怕接手維護 RxJS，而禁止使用 RxJS 的情境！這是非常令人厄婉的一件事情。

而我自己在比較理解 RxJS 後，則是深深的被其流暢的寫法及可維護性給吸引，開始在公司努力推坑同事使用 RxJS，也因此促成這系列文章，整理出我自己認為比較適合 (推坑成功率比較高？) 的學習路徑，希望幫助大家「打通 RxJS 任督二脈」！

昨天我們講了幾個常用 RxJS operators，今天再來看看一些其他在 Angular 常見的應用吧！

在前兩天介紹 AsyncPipe 時，我們不難發現當進入 RxJS 思維時，搭配 AsyncPipe 可以帶來非常多的好處！雖然透過這種不使用 subscribe() 訂閱的方式，對於許多剛進入 Angular 或 RxJS 世界的朋友會感到不適應；尤其是當有更多複雜資料要處理時，不使用 subscribe() 訂閱後處理資料還真的不知道該如何處理是好。

其實只要透過 RxJS 提供的運算子(operators)，便能夠幫助我們減少大量的程式，並寫出更加好維護的程式碼！這兩天就讓我們來看看一些我個人在開發 Angular 時常用的 RxJS 應用技巧吧！

在撰寫前端程式時，我們很難避免會遇到非同步的程式處理，在大量使用 RxJS 的 Angular 中更是如此，而今天我們要介紹的 AsyncPipe 在樣板上要處理非同步可以說是非常方便的工具！

rxjs-spy，是一款專門用來除錯RxJS的套件，透過rxjs-spy，我們可以很輕易的在網頁執行階段理解每一步operator的動作，同時調整現有的observable，來驗證不同邏輯帶來的結果，最棒的是，整個過程幾乎不用動到原來的程式碼，可以說是非常方便的一款library，今天我們就來看看這個神奇的RxJS除錯神器－rxjs-spy吧！

Angular內建了一個async pipe，讓我們在view中處理非同步資料時更加輕鬆，不論是Promise還是Observable都不需要額外做then或subscribe的動作，只要在view中加入async這個pipe就可以自動把該做的事情都做好，但當當一個非同步的結果會在不同地方顯示時，用async pipe就會發生重複處理的問題，這時就可以搭配RxJs的shareReplay operator來解決這個問題。