RxJS Observable – czym jest i gdzie go znajdziesz w Angularze

Czym jest observable?

Observable to strumień, który emituje wartości (pojedyńcze lub wiele) dowolnego typu do którego możesz się podłączyć oraz od niego odłączyć. Brzmi znajomo? Z pewnością – pewnie nie raz zapisałeś się do newslettera i otrzymywałeś newsy na maila -stałeś się obserwatorem (observer) strumienia (observable). Observable jest częścią biblioteki RxJs oraz opiera się na wzorcu Obserwatora.

Promise vs observable

Często observable jest porównywany do Promise. Oba pozwalają na obsługę asynchronicznych operacji i przekazywanie wartości, jednak jest między nimi kilka znaczących różnic:

• promise zwraca nam jedną wartość, Observable może nam zwrócić wiele wartości w trakcie jego działania – do momentu zaprzestania subskrypcji strumienia np.
  • valueChanges w formularzu reaktywnym
  • EventEmitter
• observable może być anulowane – bardzo przydatne przy anulowaniu requestu
• dane ze strumienia mogą być modyfikowane przez operatory

Gdzie strumienie są używane w Angularze?

Angular wykorzystuje strumienie przy przekazywaniu wartości pomiędzy komponentami jeśli korzystarz z EventEmitter. Poprzez rozszerzenie Subject o metodę emit() możesz przesyłać dane do komponentu rodzica. Gdy wywołujesz metodę emit na zmiennej EventEmitter, Angular ustawia nową wartość poprzez metodę next zmiennej Subject

Kolejnym miejscem gdzie znajdziesz strumienie to wywołanie metod z HttpClient np. http.post('/api/post-item'). Warto zaznaczyć, że request może być anulowane poprzez wywołanie unsubscribe oraz powtórzony poprzez wykorzystanie operatora retryWhen.

Observable znajdziemy również w Router.events, które możemy łatwo filtrować w celu wykonania akcji na konkretnym evencie. Możliwa jest również subskrypcja właściwości url w ActivatedRoute.

Prawdopodobnie najczęściej wykorzystywane są strumienie w ReactiveForms. Mamy tutaj sporo możliwości ponieważ możemy zasubskrybować się między innymi na:

• zmianie danych w formularzu valueChanges (zarówno całym formularzu jak i pojedyńczym polu)
• zmianie state’u formularza stateChanges

Jeśli uważasz, że powinno się zaznaczyć inne miejsca, gdzie strumienie występują w Angularze, zostaw info w komentarzu.