Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «then, catch, finally». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`then()`** реєструє обробник успішного виконання проміса, **`catch()`** ловить помилки в ланцюжку промісів, а **`finally()`** виконується завжди, незалежно від результату. **Ключове:** усі три методи повертають новий Promise, що дозволяє будувати ланцюжки.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## 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()` - ти прибираєш коробку і миєш руки, > незалежно від того, поїв ти чи ні.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.