JavaScript метод Promise.prototype.catch()

Определение и применение

JavaScript метод .catch() объекта Promise добавляет обработчик, который будет вызван при изменении состояния объекта Promise на rejected (выполнение отклонено).

Метод .catch() ведет себя аналогично вызову метода then() с аргументами (undefined, onRejected), он реализован таким образом, что внутренне вызывает метод then() с этими аргументами (является сокращенным вариантом метода - алиасом).

Обращаю Ваше внимание на то, что обещание, возвращаемое методом .catch() отклоняется, если функция обработчик выдает ошибку, или возвращает обещание, которое само по себе отвергается, при возврате обычного значения оно успешно выполняется с ним. Возвращённое обещание или thenable определяет последующий результат; оно может оставаться ожидающим.

Метод возвращает новое обещание. Обработчики вызываются асинхронно через очередь микрозадач, даже если результат уже известен.

Поддержка браузерами

Спецификация: ecma262

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьjavascript.builtins.Promise.catch
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`catch`	✓32	✓12	✓29	✓19	✓8	✓32	✓29	✓19	✓8	✓2.0	✓4.4.3	✓8

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

p.catch(onRejected);

Спецификация

ECMAScript: Promise.prototype.catch()

Значения параметров

Promise: справочные сведения
Параметр	Описание
`onRejected`	Функция, которая будет вызвана, когда обещание отклонено. Эта функция имеет только один аргумент - значение с которым обещание было отклонено. Если это не функция, она внутренне заменяется функцией "Thrower" (она выдает ошибку, полученную в качестве аргумента).

Примеры, попробуйте сами

В следующем примере мы с Вами рассмотрим ситуацию при которой в вызове обработчика, предназначенного для обработки состояния fulfilled (успешное выполнение) объекта Promise происходит ошибка:

В примере «Ошибка в предыдущем обработчике» показан результат вызова метода.

Ошибка в предыдущем обработчике

Измените значение или результат обработчика и сравните порядок сообщений после запуска.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Ошибка в предыдущем обработчике</title>
  </head>
  <body>
    <p>Результат выполнения выводится в консоль.</p>
  </body>
</html>

main.js

JavaScript

const promise = Promise.resolve() // обещание успешно выполнено с заданным значением

promise
    .then(() => {
        throw new Error('Ошибочка вышла')
    }) // генерируем исключение и возвращаем отклоненное обещание
    .then(
        (val) => console.log(val), // обработчик не будет вызван
        (err) => console.log(err.message),
    ) // обработчик при отклоненном выполнении

// Ошибочка вышла

В этом примере мы инициализировали переменную, которая содержит объект Promise, который мы вернули с использованием метода resolve() (обещание было успешно выполнено с заданным значением). С использованием методов then() мы добавили цепочку вызовов.

Обратите внимание, что внутри первого вызова метода then() мы генерируем исключение с определенном текстом ошибки. Что приводит к тому, что мы возвращаем объект Promise выполнение которого было отклонено. В результате следующий вызов метода then() будет обрабатывать ошибку, то есть сработает функция, которая предназначена для случая, когда обещание отклонено (второй аргумент).

На практике, как правило, для удобства и лучшей читаемости кода при обработке ошибок используют метод catch(), а не используют синтаксис метода then() с двумя аргументами. Рассмотрим следующий пример:

В примере «Продолжение после обработки ошибки» показан результат вызова метода.

Продолжение после обработки ошибки

Измените значение или результат обработчика и сравните порядок сообщений после запуска.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Продолжение после обработки ошибки</title>
  </head>
  <body>
    <p>Результат выполнения выводится в консоль.</p>
  </body>
</html>

main.js

JavaScript

const promise = Promise.resolve() // обещание успешно выполнено с заданным значением

promise
    .then(() => {
        throw new Error('Ошибочка вышла')
    }) // генерируем исключение и возвращаем отклоненное обещание
    .catch((error) => console.log(error.message)) // добавляем обработчик для отклоненного обещания
    .then(() => console.log('Обработчик будет вызван')) // обработчик для успешного выполнения

// Ошибочка вышла
// Обработчик будет вызван

В этом примере мы инициализировали переменную, которая содержит объект Promise, который мы вернули с использованием метода resolve() (обещание было успешно выполнено).

С использованием метода then() мы добавили обработчик, вызываемый когда объект Promise имеет состояние fulfilled (успешное выполнение). Внутри него мы генерируем исключение с определенным текстом ошибки, что приводит к тому, что мы возвращаем объект Promise выполнение которого было отклонено.

Обратите внимание, что далее для обработки ошибки мы используем метод catch(), а не используем синтаксис метода then() с двумя аргументами. Метод catch() является сокращенным вариантом метода then(undefined, onRejected).

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

В следующем примере мы рассмотрим ситуацию в которой метод catch() будет генерировать исключение:

В примере «Повторное отклонение цепочки» показан результат вызова метода.

Повторное отклонение цепочки

Измените значение или результат обработчика и сравните порядок сообщений после запуска.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Повторное отклонение цепочки</title>
  </head>
  <body>
    <p>Результат выполнения выводится в консоль.</p>
  </body>
</html>

main.js

JavaScript

const promise = Promise.reject(new Error('Ошибочка')) // обещание отклонено

promise
    .catch((error) => {
        // добавляем обработчик для отклоненного обещания
        console.log(error.message) // выводит в консоль текст ошибки
        throw new Error('Ошибочка 2') // генерируем исключение и возвращаем отклоненное обещание
    })
    .catch((error) => {
        // добавляем обработчик для отклоненного обещания
        console.log(error.message) // выводит в консоль текст ошибки
        throw new Error('Ошибочка 3') // генерируем исключение и возвращаем отклоненное обещание
    })
    .catch((error) => console.log(error.message)) // добавляем обработчик для отклоненного обещания и выводим в консоль текст ошибки
    .then(() => console.log('Наконец без ошибок')) // обработчик для успешного выполнения

// Ошибочка
// Ошибочка 2
// Ошибочка 3
// Наконец без ошибок

В этом примере мы инициализировали переменную, которая содержит объект Promise, который мы вернули с использованием метода reject() (обещание было отклонено).

Для обработки ошибок мы используем цепочку вызовов, которую мы составили с использованием метода catch(). Обратите внимание, что первые два вызова метода catch() помимо того, что выводят в консоль текст ошибки, дополнительно еще генерируют исключение.

Третий метод catch() просто выводит в консоль текст ошибки и возвращает обещание, которое имеет состояние fulfilled (успешное выполнение), которое мы и обрабатываем в методе then(), который находится в конце цепочки.