0Pricing
Angular Academy · Lekcja

Obserwowalne i subskrypcje

Twórz strumienie obserwowalne i subskrybuj je.

Obserwowalne i subskrypcje to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Czym jest Observable

Observable to leniwy strumień wartości pojawiających się w czasie. Nic się nie dzieje, dopóki nie wykonają Państwo operacji subscribe. Strumień może emitować zero lub więcej wartości, a następnie zakończyć się pomyślnie albo błędem.

RxJS to reaktywna biblioteka dostarczana z Angular do obsługi zadań asynchronicznych, takich jak żądania HTTP, zdarzenia i timery.

Tworzenie Observable

Konstruktor Observable przyjmuje funkcję subskrybenta. Wywołaj next(), aby wyemitować wartość, complete(), aby zakończyć strumień, lub error(), aby zasygnalizować błąd.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

Subskrybowanie

Subskrybowanie rozpoczyna wykonanie. Przekaż obserwatora z procedurami obsługi next, error i complete.

numbers$.subscribe({
  next: v => console.log('value', v),
  error: err => console.error(err),
  complete: () => console.log('done')
});
// value 1, value 2, value 3, done

Observable są leniwe

Funkcja subskrybenta nie zostanie uruchomiona, dopóki nie zostanie wywołane subscribe(). Każda subskrypcja uruchamia nowe, niezależne wykonanie (zimny Observable).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

Pomocnicze funkcje tworzenia: of i from

Konstruktor jest używany rzadko. Funkcje pomocnicze, takie jak of i from, umożliwiają szybkie tworzenie Observable.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

Funkcje tworzące interval i timer

interval emituje rosnące liczby zgodnie z harmonogramem, a timer czeka, a następnie emituje wartość.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClient zwraca Observable

W Angular metody HttpClient zwracają Observable. Żądanie jest wysyłane dopiero po wykonaniu subskrypcji.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

Obiekt Subscription

subscribe() zwraca obiekt Subscription. Wywołaj unsubscribe(), aby przestać otrzymywać wartości i zwolnić zasoby.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

Zakończenie a anulowanie subskrypcji

Gdy Observable wykona complete() lub error(), automatycznie zwalnia zasoby. W przypadku nieskończonych strumieni (interval, zdarzenia DOM) muszą Państwo samodzielnie anulować subskrypcję.

Skrócona forma obserwatora

Jeśli interesują Państwa tylko wartości, można przekazać pojedynczą funkcję — stanie się ona procedurą obsługi next.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

Zimne a gorące Observable (w skrócie)

Zimne Observable zaczynają generować wartości po subskrypcji, a każdy subskrybent otrzymuje własne wykonanie (HTTP, of, interval). Gorące Observable generują wartości niezależnie od liczby subskrybentów i współdzielą je między nimi (następnie omówimy Subjects).

Szybkie sprawdzenie

Sprawdź swoją wiedzę o Observable.

Podsumowanie: Observable i subskrypcje

Observable to leniwy strumień aktywowany za pomocą subscribe().

  • Emituj wartości za pomocą next, kończ strumień za pomocą complete, a błędy zgłaszaj za pomocą error.
  • Metody HttpClient zwracają Observable — żądania są wysyłane po subskrypcji.
  • Anuluj subskrypcje nieskończonych strumieni, aby uniknąć wycieków.

Następnie: Subjects i BehaviorSubject.

Często zadawane pytania

Czy lekcja „Obserwowalne i subskrypcje” jest bezpłatna?

Tak — pełny tekst „Obserwowalne i subskrypcje” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Obserwowalne i subskrypcje”?

Twórz strumienie obserwowalne i subskrybuj je. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Obserwowalne i subskrypcje”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Obserwowalne i subskrypcje
  2. Subjects i BehaviorSubject
  3. Anulowanie subskrypcji i wycieki pamięci
  4. Potok async
← Powrót do Angular Academy