Промисы в JavaScript: как работают then, catch и цепочки

Помните те времена, когда асинхронный код превращался в «ад колбэков»? Глубокая вложенность функций делала чтение кода похожим на разгадывание лабиринта. В 2015 году стандарт ES6 представил Promise - объект, который представляет результат асинхронной операции (успех или ошибка) и служит связующим звеном между кодом, выполняющим задачу, и функциями, использующими её результат. Промисы не просто упростили синтаксис; они изменили архитектуру асинхронного программирования в JavaScript, позволив строить линейные цепочки вместо пирамид вложенности.

Три состояния промиса

Чтобы эффективно использовать промисы, нужно понимать их жизненный цикл. Каждый Promise находится ровно в одном из трёх состояний:

• Pending (Ожидание): Начальное состояние. Операция ещё не завершена, результат неизвестен.
• Fulfilled (Выполнено): Операция успешно завершилась, и у промиса есть значение.
• Rejected (Отклонено): Произошла ошибка, и операция не смогла завершиться.

Важно помнить: промис неизменяем. Как только он переходит из состояния ожидания в выполненное или отклонённое, это состояние фиксируется навсегда. Вы не можете переопределить результат уже разрешённого промиса.

Метод .then(): сердце цепочки

Метод .then() - это основной инструмент для обработки успешных результатов. Его главная особенность, которую часто упускают новички, заключается в том, что .then() всегда возвращает новый промис, независимо от того, что вернул ваш обработчик.

Это правило критически важно для построения цепочек. Если внутри .then() вы возвращаете обычное значение (например, число или строку), следующий .then() получит это значение как аргумент. Если же вы возвращаете другой промис, цепочка «ждёт» его завершения перед тем, как передать результат дальше.

Метод .then() принимает до двух аргументов: функцию-обработчик успеха (onFulfilled) и функцию-обработчик ошибки (onRejected). Однако хорошей практикой считается использовать только первый аргумент для успеха, а обработку ошибок выносить в отдельный блок .catch().

Обработка ошибок с помощью .catch()

Метод .catch() предназначен исключительно для перехвата ошибок. Его удобство заключается в том, что один .catch() в конце цепочки ловит ошибки со всех предыдущих шагов. Вам не нужно дублировать логику обработки ошибок на каждом этапе, как это было в старых паттернах с колбэками.

Если где-то в цепочке возникает исключение или промис отклоняется, выполнение мгновенно пропускает все последующие .then() и переходит к ближайшему .catch(). Это делает код более безопасным и читаемым.

Также существует метод .finally(), который срабатывает независимо от исхода (успех или ошибка). Он идеален для очистки ресурсов: скрытия индикаторов загрузки, закрытия соединений или сброса флагов.

Как работают цепочки промисов

Цепочки промисов (Promise Chaining) позволяют выполнять несколько зависимых асинхронных операций последовательно. Представьте сценарий: сначала нужно загрузить пользователя по ID, затем получить его настройки, и наконец, применить эти настройки к интерфейсу.

Без промисов это выглядело бы так:

getUser(id, function(user) {
  getSettings(user, function(settings) {
    applySettings(settings);
  });
});

С промисами логика становится линейной:

getUser(id)
  .then(user => getSettings(user))
  .then(settings => applySettings(settings))
  .catch(error => console.error('Ошибка:', error));

Каждый .then() передаёт результат следующему. Если внутри .then() стартует новый асинхронный процесс (например, сетевой запрос через fetch), обязательно нужно вернуть промис этого процесса. Иначе цепочка продолжится, не дожидаясь результата новой операции.

Асинхронная природа и микрозадачи

Важное правило, которое стоит запомнить: коллбэк промиса никогда не запускается синхронно. Даже если промис уже зарезолвлен, обработчик .then() выполнится только после завершения всего текущего синхронного кода.

Это происходит благодаря очереди микрозадач (microtask queue). Когда JavaScript выполняет код, он сначала отрабатывает весь синхронный блок. Только потом движок проверяет очередь микрозадач и выполняет отложенные промис-коллбэки. Это гарантирует предсказуемость порядка выполнения:

1. Синхронный код («до»)
2. Остальной синхронный код («после»)
3. Коллбэки промисов («результат»)

Понимание этого механизма помогает избегать багов, связанных с порядком обновления DOM или состояния приложения.

Параллельное выполнение: Promise.all()

Иногда операции независимы друг от друга. Например, вам нужно загрузить данные профиля, список друзей и историю активности одновременно. Использование цепочки .then() здесь неэффективно, так как общее время будет суммой времени всех запросов.

Для таких случаев используется Promise.all(). Этот метод принимает массив промисов и возвращает единый промис, который разрешается массивом результатов, когда все входящие промисы успешно завершатся. Порядок результатов соответствует порядку промисов во входном массиве.

Если хотя бы один промис в массиве отклоняется, Promise.all() немедленно отклоняется с этой ошибкой, игнорируя результаты остальных успешных промисов. Для частичной обработки существуют методы Promise.allSettled() и Promise.any().

Async/Await vs Then/Catch

В 2017 году появился синтаксис async/await, который является «синтаксическим сахаром» поверх промисов. Он позволяет писать асинхронный код так, будто он синхронный:

async function loadData() {
  try {
    const user = await getUser(id);
    const settings = await getSettings(user);
    applySettings(settings);
  } catch (error) {
    console.error('Ошибка:', error);
  }
}

Хотя async/await часто удобнее для чтения длинных последовательностей, понимание .then() и .catch() остаётся критически важным. Многие библиотеки и API всё ещё возвращают промисы напрямую, а некоторые сложные паттерны (например, динамическое построение цепочек через reduce) проще реализовать на уровне промисов.