Jeśli kiedykolwiek pracowałeś z JavaScriptem, prawdopodobnie pracowałeś z Promise. Jest to bardzo zabawna i potężna funkcja języka, ale jej ograniczeniem jest to, że może obsłużyć tylko jedno zdarzenie (gdy coś zostało zrobione lub nie powiodło się).

Dzięki temu Observablesmoże być znacznie bardziej przydatny w wielu sytuacjach.

Obserwable kontra obietnica

Observablesmoże udostępniać Promisefunkcje , pracować z zerem lub większą liczbą zdarzeń i działać jak strumienie. Domyślnie Observablesmożna je anulować i rozpocząć dopiero po wykupieniu subskrypcji zamiast natychmiastowego polubienia Promises. Ponadto możesz używać operatorów, a nawet próbować ponownie, jeśli zajdzie taka potrzeba.

Obserwowalny język

Kiedy mówisz o Observables, musisz znać kilka pojęć:

• Observable: Leniwy, wielowartościowy rzucający.
• Observer: Wartość konsumenta z Observable.
• Subjects: Specjalny typ, Observablektóry działa jak emiter zdarzeń i może multicastować wartość do wielu, Observersponieważ przechowuje listę wszystkich, w Observersktórych Observablemożna emitować tylko pojedynczo.
• Subscription: Obiekt zwracany po wykupieniu subskrypcji. Reprezentuje jednorazowy zasób.
• Operators: Funkcje używane do potoku Observablewartości lub tworzenia Observables.
• Scheduler: Część, która kontroluje, kiedy rozpoczyna się subskrypcja i kiedy dostarczane są komunikaty.

Chcę użyć biblioteki innej firmy, ale uważam, że byłoby lepiej, gdybym pokazał znacznie prostszy Observablekod, aby można było zrozumieć, co się dzieje pod maską. Najpierw zrozummy, jak Observabledziała.

const obs = new Observable((subscriber) => {
  // some logic
});

const obs = new Observable((subscriber) => {
  subscriber.next(20);
  subscriber.next(30);
  subscriber.complete(40);
});

Po zainicjowaniu an Observableotrzymujesz observableobiekt z powrotem, który możesz wywołać metodę subskrypcji, aby zainicjować emitowanie wartości.

Kiedy zasubskrybujesz observable, otrzymasz subscriptionobiekt. subscribeMetoda może trwać trzy funkcje. Wymagany jest tylko pierwszy. Można także zadzwonić pod ten pojedynczy obiekt, który zawiera next, completei errormetod.

Wartości są emitowane tylko podczas subskrypcji — nie podczas tworzenia observable. Oznacza to, że dla naszego przykładu za każdym razem, gdy subskrybuję, otrzymuję trzy wartości i gotowe. Ponieważ subscriptionkończy się, nie muszę unsubscribe, co jest metodą, którą można wywołać na subscriptionobiekcie zwróconym podczas subskrypcji.

Utwórz podstawowe obserwowalne

Prosta observableimplementacja może wyglądać tak:

Ten kod pokazuje, że kiedy inicjujesz Observable, przyjmuje observerfunkcję, ale nic z nią nie robi, dopóki subscribemetoda nie zostanie wywołana. Dlatego właśnie subscriptionfunkcja wyzwala emisję wartości.

Pierwsza ifi elsepo prostu przesłania completemetodę, aby wywołać również unsubscribe, która może być funkcją zwróconą przez , observeraby pomóc w oczyszczeniu subscription.

Następnie wywołujemy observerfunkcję z Observerobiektem, który będzie zawierał trzy metody, które wywołają trzy metody przekazane do subscribefunkcji. ObserverMoże wyglądać następująco:

Jak być może zdałeś sobie sprawę, jest to w zasadzie system wywołań zwrotnych, który dopasowuje funkcje w dziwny, wsteczny i do przodu sposób, aby stworzyć subscriptionsystem.

Implementacja może być znacznie bardziej złożona, ponieważ nie obejmuje nawet harmonogramów i możliwości przesyłania wartości. Aby zacząć używać Observables, rozważ instalację i zabawę z biblioteką RxJs . Zawiera obszerną listę operatorów i innych funkcji.

Korzystanie z obserwacji

Coś, z czym nie możesz zrobić, Promisesto emitowanie wartości w kółko. Poniższy kod pokazuje przykład tego przy użyciu setIntervalfunkcji timera:

Możesz również użyć go do prostego przesyłania plików i monitorować postęp, co działa lepiej z Observableniż z Promise. Piękne jest to, że zatrzymanie przesyłania jest bardzo łatwe.

Zaimplementowanie tego z Promisewymagałoby dziwnej mieszanki Promisei wywołań zwrotnych, które są prawie zbyt mylące, aby je zrozumieć.

Sprawdź cały kod źródłowy tego artykułu.

Wniosek

Observablesotwórz zupełnie inny świat programowania. Sprawiają, że Twoja aplikacja jest reaktywna i sterowana zdarzeniami z nieograniczonymi możliwościami i większą kontrolą z Twojej strony. Nie musisz nawet zostawiać w Promisestyle, ponieważ łączenie ich Promisesjest równie łatwe.

Rozważ przygodę w świecie Observablesi ulepsz sposób programowania za pomocą JavaScript i tak dalej. ReactiveX to potężna biblioteka z wersjami dla wielu języków, takich jak Java, Python, Javascript, Kotlin, C++ itp. Sprawdź to.

Odwiedź stronę Przed średnikiem, aby uzyskać więcej wpisów na blogu związanych z programowaniem.