Pracując ze zwykłymi zmiennymi, w łatwy sposób można je zdefiniować, a następnie przypisać im wartości. Nie jest jednak tak prosto z observable – głównym elementem biblioteki RxJS. To byt bardziej skomplikowany, ale twórcy biblioteki o tym pomyśleli i stworzyli zestaw metod, nazywanych creation operators. Najpowszechniejszym z nich w RxJS jest operator of.
Czym jest operator of?
To zwykła metoda, która w wyniku zwraca observable, czyli to czego chcemy. Tak samo działają wszystkie inne creation operatory, którego of jest reprezentantem. W parametrze przekazujemy wartości, jakie chcemy by były dostępne w observable. Mogą to być typy proste, tablice, czy nawet obiekty. Ważne by wiedzieć, że zostaną one wyemitowane synchronicznie, czyli dostaniemy je natychmiast, gdy o nie poprosimy.
Prosty przykład
Załóżmy, że potrzebujemy observable, który będzie zwracał same liczby. Niech to będą 1, 5 oraz -5. Utworzenie takiego observable w kodzie to jedna linijka:
ourObservable = of(1, 5, -5);
No dobra, dwie! Trzeba jeszcze powiedzieć programowi, czym jest of. Zaimportujmy jego definicje z RxJSa.
import { of } from 'rxjs';
Nie ma tutaj w zasadzie nic, oprócz wywołania metody of. Będzie ona tworzyła observable, dlatego umieszczamy wynik metody w zmiennej ourObservable, by można się było potem do niego odwołać. Teraz pracujemy już tak, jak ze zwykłym observable, który może wygenerować liczby i wyświetlić je na konsoli.
this.ourObservable.subscribe((value) => console.log(value));
Na konsol pojawią się 3 wpisy, te które podaliśmy w parametrze metody of.
Przykład 2 – tablica oraz jej elementy
Przekażemy teraz do of te same liczby, ale opakowane w tablicę. Nie znając of można by się spodziewać, że dostaniemy, albo to samo co w przykładzie powyżej, albo po prostu całą tablicę na raz. Sprawdźmy:
ourObservable = of([1, 5, -5]);
a na konsoli pojawi się:
Różnica względem poprzedniego przykładu jest istotna. Observable emituje cały złożony obiekt zamiast robić to element po elemencie. Ma to sens, ponieważ możemy chcieć takiego rezultatu. To co przekazujemy w jednym parametrze w of zostanie w całości wyemitowane w niezmienionej formie. Jeżeli jednak chcielibyśmy elementy tablicy po kolei, to można zastosować operator from.
Przykład 3 – obiekty oraz mieszanie typów
Nic nie stoi na przeszkodzie, by umieścić w of również obiekty. Stwórzmy klasę detektywa, który będzie miał w sobie tylko imię i nazwisko:
export class Detective {
firstName: string;
lastName: string;
constructor(firstName: string, lastName: string) {
this.firstName = firstName;
this.lastName = lastName;
}
}
i wrzućmy jej obiekt do ofa.
ourObservable = of(new Detective("Jan", "Nowak"));
Wynik na konsoli:
W ostatnim przykładzie będzie pomieszanie z poplątaniem. Wrzucimy do of wszystko na raz. Będziemy mieli liczbę, obiekt, tablicę, enuma, znak, liczbę po przecinku oraz stringa.
ourObservable = of(15, this.detective, "devtective", -14.25, ["sa", 1, 2], 'a', Options.optionA);
Na konsoli dostaliśmy to samo, o co poprosiliśmy w tej samej kolejności:
Podsumowanie
Wiesz już całkiem sporo o operatorze of. Tworzy on po prostu observable z dowolnymi danymi, które mu przekażesz. Przydaje się, gdy przy wykonywaniu operacji musisz zwrócić dokładnie typ observable, który powinien zawierać coś konkretnego, np. obiekt reprezentujący pustą wartość, albo obiekt potrzebny do obsługi błędów. Podczas nauki też się przyda. RxJS pracuje na observable, więc trzeba je mieć, by efektywnie uczyć się zagadnień dostępnych w bibliotece. Dodatkowo zostawiam link do dokumentacji.
Czego się dowiedziałeś?
- Wiesz do czego służy operator of z biblioteki RxJS.
- Potrafisz w prosty sposób tworzyć synchroniczne observable.
- Wiesz jak zapełniać observable przy tworzeniu danymi różnego rodzaju.
- Znasz także sposób działania of w przypadku tablic — wiesz, że operator wyemituje całą tablicę jako jeden element, a nie jej poszczególne wartości.
- Rozpoznajesz, do jakiej kategorii operatorów należy of – do creation operators.
- Znasz podstawowe zastosowania of.
