Що робить ConcatMap?

AngularMiddle~1 хв читання

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

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

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

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

Розгорнуто

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

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

Приклад

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 с)
(через 2 с)
(через 3 с)

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

Візуально

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

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

result:      ----- ----- -----

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

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

Наприклад:

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

Angular-приклад:

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

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

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

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

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

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

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

Наприклад:

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

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

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

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

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

Приклад:

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

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

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.