Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить ConcatMap?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Чудове питання - зазвичай його ставлять разом зі `switchMap`.

## Коротко (як на співбесіді)

**concatMap** - це оператор RxJS, який **обробляє inner Observable послідовно, по одному**, чекаючи завершення попереднього.

Він **ставить нові значення в чергу**.

## Розгорнуто

`concatMap` - це mapping-оператор, який:

1. отримує значення з source Observable
2. створює inner Observable
3. **чекає на його завершення**
4. лише потім запускає наступний

### Приклад

```ts
import { of } from 'rxjs';
import { delay, concatMap } from 'rxjs/operators';

of(1, 2, 3).pipe(
  concatMap(v => of(v).pipe(delay(1000)))
).subscribe(console.log);
```

Результат:

```
1 (через 1 с)
2 (через 2 с)
3 (через 3 с)
```

Хоча значення прийшли одразу, виконуються вони **послідовно**.

## Візуально

```
source:      a----b----c

concatMap:
inner a:     -----
inner b:          -----
inner c:               -----

result:      ----- ----- -----
```

## Коли використовують concatMap

Коли важливо **зберегти порядок операцій**.

Наприклад:

- збереження даних
- відправлення форм
- запис у БД
- черга API-запитів
- завантаження файлів

Angular-приклад:

```ts
this.saveClicks$.pipe(
  concatMap(data => this.api.save(data))
).subscribe();
```

Кожен save виконується строго по порядку.

## Відмінність від switchMap

| Оператор | Поведінка |
|---|---|
| switchMap | скасовує попередній |
| concatMap | ставить у чергу |
| mergeMap | паралельно |
| exhaustMap | ігнорує нові |

## Важливий момент

`concatMap` працює коректно **лише якщо inner Observable завершується**.

Якщо він не завершиться, черга зависне.

Наприклад:

```ts
concatMap(() => interval(1000)) // погана ідея
```

## Типове follow-up запитання

На співбесіді часто запитують:

**Коли concatMap кращий за switchMap?**

Відповідь: коли **не можна втрачати операції** і важливий порядок виконання.

Приклад:

- збереження кроків форми
- черга повідомлень
- транзакції

## Проста шпаргалка (часто запитують)

Можна відповідати так:

> switchMap - скасовує
> concatMap - по черзі
> mergeMap - паралельно
> exhaustMap - ігнорує

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати286 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.