Асинхронный конвейер
Подписывайтесь в шаблонах без ручной очистки.
«Асинхронный конвейер» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Что делает конвейер async
Конвейер async подписывается в шаблоне на Observable (или Promise), отображает последнее выданное значение и автоматически отписывается при уничтожении компонента.
Базовое использование
Привяжите observable непосредственно в шаблоне и пропустите его через async.
@Component({
template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
message$ = of('Hello from RxJS');
}Отображение объектов с помощью async
Он работает со значениями любого типа. Сочетайте его с другими конвейерами, например json или date.
user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>Избегайте нескольких подписок
Каждое использование async создаёт подписку. Если использовать его много раз для одного и того же observable, это приведёт к нескольким HTTP-запросам. Используйте синтаксис as, чтобы подписаться один раз.
<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>Новый поток управления
В современном Angular используйте @if вместе с as, чтобы применить тот же шаблон с одной подпиской.
@if (user$ | async; as user) {
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
}Значение null во время ожидания
До первой выдачи async возвращает null. Обрабатывайте состояние загрузки явно.
@if (data$ | async; as data) {
<list [items]="data" />
} @else {
<p>Loading...</p>
}Ручная отписка не требуется
Конвейер автоматически отписывается при уничтожении, устраняя целый класс утечек памяти. Поэтому это предпочтительный способ использовать observable в шаблонах.
Переключение между observable
Если ссылка на привязанный observable изменяется, конвейер async автоматически отписывается от старого и подписывается на новый.
search(term: string) {
this.results$ = this.http.get('/api/search?q=' + term);
// async pipe swaps subscriptions for you
}Конвейер async с BehaviorSubject
Сочетание сервиса с BehaviorSubject и конвейера async обеспечивает чистый реактивный интерфейс без кода ручной подписки.
// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>Конвейер async и toSignal
Оба варианта автоматически управляют подписками. Конвейер async работает в шаблоне, а toSignal() переносит значение в код компонента как сигнал. Выбирайте вариант в зависимости от того, где нужно это значение.
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}Краткое изложение рекомендаций
В компонентах отдавайте предпочтение конвейеру async (или toSignal), а не ручной подписке. Используйте as, чтобы избежать повторных подписок, и всегда обрабатывайте исходное состояние null/загрузки.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли работу конвейера async.
Повторение: конвейер async
Конвейер async подписывается в шаблоне и освобождает ресурсы при уничтожении.
- Используйте
as(с @if или *ngIf), чтобы подписаться один раз. - До первой выдачи он возвращает null — обрабатывайте состояние загрузки.
- Для шаблонов он предпочтительнее ручных подписок.
Вы завершили курс «Основы RxJS».
Часто задаваемые вопросы
Урок «Асинхронный конвейер» бесплатный?
Да — полный текст урока «Асинхронный конвейер» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Асинхронный конвейер»?
Подписывайтесь в шаблонах без ручной очистки. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Асинхронный конвейер»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Наблюдаемые последовательности и подписки
- Субъекты и BehaviorSubject
- Отмена подписок и утечки памяти
- Асинхронный конвейер