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

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

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

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

Контент

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

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

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

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

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

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

**mergeMap** - це оператор RxJS, який **підписується на кожен inner Observable і виконує їх паралельно**, об'єднуючи результати в один потік.

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

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

`mergeMap` (він же `flatMap`) - це mapping-оператор, який:

1. отримує значення з source Observable
2. створює inner Observable
3. **підписується на всі inner Observable одночасно**
4. об'єднує їхні результати

Сигнатура:

```ts
source$.pipe(
  mergeMap(value => observable$)
)
```

### Приклад

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

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

Результат:

```
1
2
3
```

Усі приходять приблизно одночасно через 1 секунду, бо виконуються **паралельно**.

## Візуально

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

mergeMap:
inner a:     -----
inner b:     -----
inner c:     -----

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

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

Коли:

- порядок не важливий
- операції незалежні
- потрібна паралельність
- операції не можна скасовувати

Angular-приклади:

- відправлення аналітики
- логування
- batch-запити
- завантаження кількох ресурсів
- background-операції

Наприклад:

```ts
from(ids).pipe(
  mergeMap(id => this.api.loadUser(id))
)
```

Завантаження підуть паралельно.

## Важливий нюанс (часто запитують)

`mergeMap` може призвести до:

- race conditions
- перевантаження API
- витоків підписок

Тому іноді обмежують concurrency:

```ts
mergeMap(fn, 3)
```

Не більше 3 активних Observable одночасно.

## Відмінність від інших map-операторів

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

Це майже обов'язкова таблиця для Angular-співбесіди.

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

Дуже люблять запитувати:

**Чому mergeMap небезпечний для HTTP?**

Відповідь: тому що можна запустити **багато паралельних запитів**, отримати **гонку даних** або **перевантажити сервер**.

## Міні-шпаргалка для співбесіди

Можна запам'ятати так:

> mergeMap - для незалежних операцій
> concatMap - коли важливий порядок
> switchMap - для запитів, які можна скасувати
> exhaustMap - для захисту від повторних дій

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

Для рев’юера

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

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