Angular - typ Observable
Stronę tą wyświetlono już: 4258 razy
Wcześniej już poznany typ Promise umożliwiał wykonywanie asynchroniczne kodu a także wywołanie funkcji na określone przypadki, jakie mogły zajść w trakcie wykonywania takiego kodu. Tym razem omówię użycie typu Observable, który to umożliwia obserwowanie obiektu poprzez subskrypcję realizowaną w sposób asynchroniczny (na strumieniach) lub synchroniczny (na zmiennych). Typ Observable umożliwia łatwiejsze operowanie na zwracanych wartościach przy pomocy sporej liczby dostępnych operatorów RxJs. Umożliwiają one łączenie kilku strumieni i oczekiwanie na wykonanie ich za jednym razem (operator forkJoin, wykonywanie operacji dodatkowych przed subskrypcją (operator tap, przełączanie się z jednego obiektu Observable na drugi (operator switchMap. Oraz wiele, wiele innych operacji. Observable wysyła informacje tylko do tych, którzy się zasubskrybowali.
Coby już nie przynudzać oto prosty przykład wywołania subskrypcji na zbiorze obiektów:
Wynik działania funkcji:
Value: 0 Value: 1 Value: 2
Samodzielne utworzenie obserwatora wygląda następująco:
Jak widać powyżej zastosowałem nieco uproszczoną wersję subskrypcji. Wynik działania powyższego kodu będzie następujący:
Some data to receive
Oczywiście w przypadku, gdy gdy obiekt typu Obervable kończy się po jednokrotnym wywołaniu to nie ma sensu odsubskrybowanie się. Taki sens istnieje, gdy obiekt obserwatora wykonuje nieskończoną liczbę wywołań. Wtedy w destruktorze ngOnDestroy konieczne będzie odsubskrybowanie się. Jeżeli tego nie zrobisz będziesz miał wycieki pamięci. Oto przykład takiego wywołującego się w nieskończoność obserwatora:
Teraz program subskrybent będzie otrzymywał informacje dopóty, dopóki się nie odsubskrybuje co jest realizowane w destruktorze ngOnDestroy. Jeżeli tego nie zrobisz to będziesz mieć wycieki pamięci ponieważ przy każdych "odwiedzinach" komponentu tworzyłby się nowy wątek, nowy subskrybent i takich wątków mogło by się po czasie natworzyć całkiem sporo.
Wynik działania powyższego obserwatora będzie taki, że co 500ms będzie wysyłał do subskrybenta info z wylosowaną wartością liczbową. Jak ci się znudzi to wystarczy się odsubskrybować co przerwie nieskończoną pętlę.
0.11802575720224517 0.47792331496191487 0.17220013882498897 0.17311422383397634 0.5920673554985459 0.053330048792298745 0.5111122552877853 0.5808523271907068 0.8702832698892748 0.6436521608916241 ... (on to the end of component life)
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz