Що робить catch() у промісах?

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

1. Що робить `.catch()`

.catch() - це метод у проміса, який викликається, якщо проміс переходить у стан "відхилено" (rejected). Тобто він ловить усі помилки, що сталися:

всередині проміса,

всередині ланцюжка .then(),

або при явному reject().

2. Синтаксис

javascript

promise.catch(onRejected)

де:

onRejected - функція, яка отримає об'єкт помилки.

3. Приклад: явне відхилення проміса

javascript

const promise = new Promise((resolve, reject) => {
  reject("Помилка при завантаженні даних");
});

promise.catch(error => {
  console.log("Спіймано:", error);
});

Вивід:

javascript

Спіймано: Помилка при завантаженні даних

.catch() спрацював, тому що проміс був відхилений (reject).

4. Приклад: помилка в коді автоматично викликає `.catch()`

javascript

const promise = new Promise(() => {
  throw new Error("Щось пішло не так");
});

promise.catch(err => {
  console.log("Спіймали помилку:", err.message);
});

Вивід:

javascript

Спіймали помилку: Щось пішло не так

Будь-яка помилка всередині функції-виконавця (executor) автоматично викликає reject.

5. Приклад: обробка помилок у ланцюжку `.then()`

javascript

Promise.resolve()
  .then(() => {
    throw new Error("Помилка в then");
  })
  .catch(error => {
    console.log("Спіймали:", error.message);
  });

Вивід:

javascript

Спіймали: Помилка в then

.catch() перехоплює помилки, навіть якщо вони сталися в одному з попередніх .then().

6. `.catch()` = `.then(null, onRejected)`

Ці два варіанти повністю еквівалентні:

javascript

promise.catch(onRejected);
promise.then(null, onRejected);

Обидва обробляють відхилений проміс. Але .catch() читається простіше і використовується частіше.

7. Приклад: повернення значення з `.catch()`

Якщо в .catch() повернути значення, воно "відновлює" ланцюжок, і наступний .then() отримає це значення як результат.

javascript

Promise.reject("Помилка")
  .catch(err => {
    console.log("Спіймали:", err);
    return "Продовжуємо роботу";
  })
  .then(result => {
    console.log("Результат:", result);
  });

Вивід:

javascript

Спіймали: Помилка
Результат: Продовжуємо роботу

.catch() може не тільки перехоплювати помилки, а й "зцілювати" ланцюжок.

8. Приклад: повторне викидання помилки

Якщо з .catch() знову викинути помилку (throw), то вона передається далі - наступному .catch() у ланцюжку.

javascript

Promise.reject("Помилка 1")
  .catch(err => {
    console.log("Спіймали:", err);
    throw new Error("Помилка 2");
  })
  .catch(err => {
    console.log("Спіймали знову:", err.message);
  });

Вивід:

javascript

Спіймали: Помилка 1
Спіймали знову: Помилка 2

9. Приклад: `.catch()` в асинхронних функціях

.catch() працює так само, як try...catch, але у вигляді ланцюжка промісів.

javascript

async function getData() {
  throw new Error("Помилка в async");
}

getData().catch(err => {
  console.log("Спіймали:", err.message);
});

Вивід:

javascript

Спіймали: Помилка в async

10. Приклад з `try...catch` для порівняння

javascript

async function example() {
  try {
    await Promise.reject(new Error("Помилка в промісі"));
  } catch (err) {
    console.log("Спіймали через try...catch:", err.message);
  }
}
example();

Аналог .catch(), але в синтаксисі async/await.

Підсумок

Особливість	Опис
Коли спрацьовує	Коли проміс відхилено (`reject` або `throw`)
Аналогічно	`then(null, onRejected)`
Повертає	Новий проміс
Може відновити ланцюжок	Якщо повернути значення з `.catch()`
Може передати помилку далі	Якщо знову `throw` всередині `.catch()`
Працює з async/await	Аналог `try...catch`

Коротке порівняння:

Ситуація	Що використовувати
Обробка помилки в ланцюжку промісів	`.catch()`
Обробка помилок у `async/await`	`try...catch`
Потрібно продовжити ланцюжок після помилки	повернути значення з `.catch()`
Потрібно прокинути помилку далі	`throw` всередині `.catch()`

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

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

Premium

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