Angular Academy · Урок

rxMethod для асинхронных операций

Обрабатывайте асинхронные процессы с помощью rxMethod

«rxMethod для асинхронных операций» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Асинхронность в SignalStore

Многие действия выполняются асинхронно: загрузка данных, поиск с задержкой, периодический опрос. SignalStore предоставляет rxMethod для управления такими реактивными асинхронными потоками, которые можно отменять.

Основы rxMethod

rxMethod создаёт метод, работающий на основе конвейера RxJS. Вы вызываете его со значением (или сигналом/наблюдаемым потоком), и это значение передаётся в поток.

import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';

withMethods((store, api = inject(Api)) => ({
  load: rxMethod<string>(pipe(
    switchMap(id => api.getById(id)),
    tap(item => patchState(store, { current: item }))
  ))
}))

Вызов rxMethod

Вызывайте его как обычный метод, передавая простое значение. Значение поступает в определённый Вами конвейер.

store.load('42');

Передача сигнала

В rxMethod можно передать сигнал. Конвейер автоматически запускается снова при каждом изменении сигнала — это идеально подходит для реактивной загрузки.

selectedId = signal('1');
ngOnInit() {
  this.store.load(this.selectedId); // reloads when selectedId changes
}

switchMap отменяет устаревшую работу

Использование switchMap означает, что новая выдача отменяет предыдущий выполняющийся запрос. Это предотвращает состояния гонки, при которых старый медленный ответ перезаписывает новый.

Отслеживание состояния загрузки

Установите признак загрузки в начале и сбросьте его после завершения, чтобы интерфейс мог показывать индикаторы загрузки.

load: rxMethod<string>(pipe(
  tap(() => patchState(store, { loading: true })),
  switchMap(id => api.getById(id).pipe(
    tap(item => patchState(store, { current: item, loading: false }))
  ))
))

Обработка ошибок

Ошибки необходимо обрабатывать внутри конвейера, иначе поток завершится и метод перестанет работать. Используйте catchError во внутреннем наблюдаемом потоке.

switchMap(id => api.getById(id).pipe(
  tap(item => patchState(store, { current: item, error: null })),
  catchError(err => {
    patchState(store, { error: err.message, loading: false });
    return EMPTY;
  })
))

Поиск с задержкой

Составляйте операторы, зависящие от времени, для поиска по мере ввода. Конвейер добавляет задержку и переключается так же, как обычный RxJS.

search: rxMethod<string>(pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(q => api.search(q)),
  tap(results => patchState(store, { results }))
))

Выбор оператора объединения

Используйте switchMap для отмены устаревшей работы, concatMap для постановки в очередь, mergeMap для параллельного выполнения, а exhaustMap для игнорирования новых вызовов во время занятости. Выбирайте оператор в зависимости от нужной степени параллелизма.

Автоматическая очистка

Подписка конвейера связана с жизненным циклом хранилища. При уничтожении хранилища (если оно ограничено областью компонента) поток закрывается, поэтому утечек не возникает и отменять подписку вручную не нужно.

Инициализация при создании

Объедините rxMethod с функциональной возможностью withHooks, чтобы запускать первоначальную загрузку при создании хранилища.

withHooks({
  onInit(store) { store.load('initial'); }
})

Быстрая проверка

Проверьте свои знания rxMethod.

Итоги

Вы использовали rxMethod для асинхронных потоков: вызывали его со значениями или сигналами, выбирали оператор объединения (switchMap для отмены устаревшей работы), отслеживали загрузку, обрабатывали ошибки с помощью catchError и полагались на автоматическую очистку подписок.

Часто задаваемые вопросы

Урок «rxMethod для асинхронных операций» бесплатный?

Да — полный текст урока «rxMethod для асинхронных операций» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «rxMethod для асинхронных операций»?

Обрабатывайте асинхронные процессы с помощью rxMethod Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «rxMethod для асинхронных операций»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy