Angular Academy · Lekcja

Potok async

Subskrybuj w szablonach bez ręcznego sprzątania.

Lekcja 4 z 413 kroki

Potok async to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.

Działanie potoku async

Potok async subskrybuje Observable (lub Promise) w szablonie, wyświetla ostatnią wyemitowaną wartość i automatycznie anuluje subskrypcję po zniszczeniu komponentu.

Podstawowe użycie

Powiąż Observable bezpośrednio w szablonie i przekaż go przez potok async.

@Component({
  template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
  message$ = of('Hello from RxJS');
}

Renderowanie obiektów za pomocą async

Działa z każdym typem emitowanych wartości. Można go łączyć z innymi potokami, takimi jak json lub date.

user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>

Unikaj wielu subskrypcji

Każde użycie async tworzy subskrypcję. Wielokrotne użycie go dla tego samego Observable powoduje wiele żądań HTTP. Użyj składni as, aby subskrybować tylko raz.

<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
</div>

Nowy przepływ sterowania

W nowoczesnym Angular użyj @if wraz z as, aby zastosować ten sam wzorzec pojedynczej subskrypcji.

@if (user$ | async; as user) {
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
}

Null podczas oczekiwania

Przed pierwszą emisją async zwraca null. Obsłuż stan ładowania jawnie.

@if (data$ | async; as data) {
  <list [items]="data" />
} @else {
  <p>Loading...</p>
}

Ręczne anulowanie subskrypcji nie jest potrzebne

Potok automatycznie anuluje subskrypcję podczas niszczenia komponentu, eliminując całą klasę wycieków pamięci. Dlatego jest preferowanym sposobem używania Observable w szablonach.

Zmiana Observable

Jeśli referencja powiązanego Observable się zmieni, potok async automatycznie anuluje subskrypcję starego Observable i zasubskrybuje nowy.

search(term: string) {
  this.results$ = this.http.get('/api/search?q=' + term);
  // async pipe swaps subscriptions for you
}

Potok async z BehaviorSubject

Połączenie usługi BehaviorSubject z potokiem async zapewnia przejrzysty reaktywny interfejs użytkownika bez ręcznego kodu subskrypcji.

// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>

Potok async a toSignal

Oba rozwiązania automatycznie zarządzają subskrypcjami. Potok async działa w szablonie, a toSignal() udostępnia wartość w kodzie komponentu jako sygnał. Wybór zależy od miejsca, w którym potrzebują Państwo tej wartości.

import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}

Podsumowanie dobrych praktyk

W komponentach preferuj potok async (lub toSignal) zamiast ręcznego subskrybowania. Używaj as, aby uniknąć zduplikowanych subskrypcji, i zawsze obsługuj początkowy stan null/ładowania.

Szybkie sprawdzenie

Sprawdź swoją wiedzę o potoku async.

Odpowiedz w interaktywnej lekcji

Podsumowanie: potok Async

Potok async subskrybuje Observable w szablonie i sprząta po sobie podczas niszczenia komponentu.

Używaj as (wraz z @if lub *ngIf), aby subskrybować tylko raz.
Przed pierwszą emisją zwraca null — obsłuż stan ładowania.
W szablonach jest preferowany zamiast ręcznych subskrypcji.

Ukończyli Państwo kurs RxJS Fundamentals.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 38
Lekcje: 144

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Potok async” jest bezpłatna?

Tak — pełny tekst „Potok async” 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 „Potok async”?

Subskrybuj w szablonach bez ręcznego sprzątania. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Potok async”?

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

← Powrót do Angular Academy