switchMap и гонка запросов

Задача

Объясните пошагово, как будет выполняться код. Могут ли возникнуть проблемы, если id эмитится раз в секунду, а запрос длится 10 секунд? Как починить?

userId$
    .pipe(switchMap((userId) => this.userService.updateUser$(someArgs)))
    .subscribe((resp) => console.log(resp));

Решение

Ответ

Как работает switchMap: на каждое новое значение из userId$ он отписывается от предыдущего внутреннего потока и подписывается на новый. То есть при новом userId предыдущий незавершённый запрос отменяется.

Проблема при id раз в секунду и запросе 10 секунд: каждый следующий userId (через 1 сек) отменяет предыдущий запрос до его завершения. В итоге ни один из первых запросов не доходит до конца — доедет только последний, после которого поток замолчит на 10 секунд. Все промежуточные updateUser$ отменяются впустую.

Отдельно: если updateUser$ — это мутирующий запрос (update/POST), отменять его на полпути опасно (сервер мог частично применить изменения). switchMap для мутаций — плохой выбор.

Как починить — выбор оператора по семантике

• concatMap — выполнять запросы строго по очереди, не теряя ни одного (каждый ждёт предыдущего). Подходит для апдейтов, где важен порядок и полнота.
• mergeMap — выполнять все параллельно (если порядок и отмена не важны).
• exhaustMap — игнорировать новые id, пока текущий запрос не завершится (например, чтобы не плодить дубли по кнопке).
• switchMap оставить только если нужен именно «последний побеждает» и запрос безопасно отменять (обычно это GET/поиск).

userId$
    .pipe(concatMap((userId) => this.userService.updateUser$(someArgs)))
    .subscribe((resp) => console.log(resp));

См. также

• subject-combination-operators