Angular Academy · Урок

Операторы преобразования

Используйте map, switchMap, mergeMap и concatMap.

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

Что такое операторы

Операторы — это функции, которые объединяются внутри .pipe() для преобразования потока. Операторы преобразования изменяют каждое выданное значение или разворачивают внутренние observable в выходной поток.

map

map преобразует каждое выданное значение, подобно Array.map, но во времени.

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

Зачем нужно отображение высшего порядка

Когда каждое значение запускает другой observable (например, HTTP-запрос), получается observable из observable. Операторы разворачивания (switchMap, mergeMap, concatMap) подписываются на внутренний observable и выдают его значения.

switchMap

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

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

mergeMap (псевдоним flatMap) выполняет внутренние observable параллельно и объединяет все выданные ими значения. Ничего не отменяется.

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

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

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

exhaustMap игнорирует новые значения, пока внутренний observable ещё выполняется. Это отлично подходит для предотвращения повторной отправки формы при нажатии кнопки.

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

Выбор подходящего оператора разворачивания

switchMap: отменяет предыдущий (поиск).
mergeMap: выполняет всё параллельно (независимые записи).
concatMap: выполняет последовательно, по одному (последовательное сохранение).
exhaustMap: игнорирует новые значения во время выполнения (кнопка входа).

switchMap и отмена

Поскольку switchMap отменяет выполняющиеся внутренние observable, он также отменяет подписку на соответствующий HTTP-запрос. Angular преобразует это в прерванный запрос, что позволяет сэкономить пропускную способность.

Сочетание map с оператором разворачивания

Часто после разворачивания Вы используете map, чтобы извлечь нужные данные.

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

Избегайте вложенных подписок

Никогда не вызывайте subscribe внутри другой подписки. Вместо этого используйте оператор разворачивания: он сохраняет декларативность конвейера и правильно управляет очисткой.

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

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

Проверьте, насколько хорошо Вы понимаете операторы преобразования.

Повторение: операторы преобразования

map преобразует значения, а операторы выравнивания обрабатывают внутренние наблюдаемые последовательности.

switchMap: отменяет предыдущую.
mergeMap: выполняет параллельно.
concatMap: выполняет последовательно и в заданном порядке.
exhaustMap: игнорирует значения, пока выполняется текущая операция.

Далее: операторы фильтрации.

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

Урок «Операторы преобразования» бесплатный?

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

Чему я научусь в уроке «Операторы преобразования»?

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

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

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

Сколько времени занимает урок «Операторы преобразования»?

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

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

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

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

← Назад к Angular Academy