then, catch, finally

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

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

javascript

promise.then(onFulfilled, onRejected);

Призначення:

then() реєструє обробник успішного виконання проміса - тобто коли проміс переходить у стан fulfilled.

Як працює:

Якщо проміс завершився успішно (resolve(value)), викликається перша функція onFulfilled(value);
Якщо завершився помилкою (reject(error)), викликається друга функція onRejected(error) (необов'язково);
Повертає новий Promise, дозволяючи будувати ланцюжки.

Приклад:

javascript

new Promise((resolve) => {
  setTimeout(() => resolve('Успіх!'), 1000);
})
  .then((result) => {
    console.log(result); // Успіх!
    return 'Наступний крок';
  })
  .then((value) => {
    console.log(value); // Наступний крок
  });

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

Що повертає `then()`

Варіант	Повертає	Поведінка
Повернення значення	`Promise.resolve(value)`	Передає результат наступному `.then()`
Повернення проміса	"розгортає" проміс	Чекає, поки він завершиться
Помилка (`throw`)	`Promise.reject(error)`	Переходить у `.catch()`

Приклад з помилкою:

javascript

Promise.resolve(10)
  .then((x) => {
    throw new Error('Проблема!');
  })
  .catch((err) => console.error(err.message)); // Проблема!

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

javascript

promise.catch(onRejected);

Призначення:

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

Як працює:

Викликається, якщо проміс відхилено (rejected);
Повертає новий проміс, дозволяючи продовжити ланцюжок.

Приклад:

javascript

new Promise((_, reject) => {
  reject('Помилка');
})
  .then(() => console.log('Це не виконається'))
  .catch((err) => console.error('Спіймали:', err))
  .then(() => console.log('Далі продовжуємо'));

Вивід:

javascript

Спіймали: Помилка
Далі продовжуємо

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

Приклад: ловить помилку з `.then()`

javascript

Promise.resolve('OK')
  .then(() => {
    throw new Error('Ой!');
  })
  .catch((err) => console.error('Помилку спіймано:', err.message));

.catch() ловить усі помилки вгору по ланцюжку.

3. Що робить `finally()`

javascript

promise.finally(onFinally);

Призначення:

finally() виконується завжди, незалежно від того, завершився проміс успішно (fulfilled) чи з помилкою (rejected).

Використовується для очищення, закриття з'єднань, приховування завантажувачів тощо.

Як працює:

Не отримує результат (value) чи помилку (error);
Виконується після .then() або .catch();
Повертає новий проміс з тим самим результатом, що й вихідний.

Приклад:

javascript

fetch('/data.json')
  .then((res) => res.json())
  .catch(() => console.error('Помилка завантаження'))
  .finally(() => console.log('Завантаження завершено'));

Навіть якщо сталася помилка, finally все одно виконається:

javascript

Помилка завантаження
Завантаження завершено

Приклад з поверненням значення

javascript

Promise.resolve('OK')
  .finally(() => console.log('Виконується завжди'))
  .then((value) => console.log(value));

Вивід:

javascript

Виконується завжди
OK

Важливо:

Якщо всередині finally викинути помилку (throw), вона замінить результат проміса:

javascript

Promise.resolve('OK')
  .finally(() => {
    throw new Error('Помилка в finally');
  })
  .then(console.log)
  .catch((err) => console.error(err.message)); // Помилка в finally

Підсумок: порівняння

Метод	Коли викликається	Отримує аргумент	Повертає	Використовується для
`then()`	при `resolve` (успіх)	результат (`value`)	новий Promise	обробки результату
`catch()`	при `reject` (помилка)	помилка (`error`)	новий Promise	обробки помилок
`finally()`	завжди (і при успіху, і при помилці)	-	новий Promise	завершальних дій

Аналогія

Уяви, ти замовив піцу.

then() - кур'єр приїхав, піцу доставлено;

catch() - кур'єр загубився, замовлення не прийшло;

finally() - ти прибираєш коробку і миєш руки, незалежно від того, поїв ти чи ні.

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

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

Premium

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