JavaScript Promise.catch() — обробка помилки обіцянки

Метод catch() (у перекладі — ловити) виконує функцію, коли обіцянка відхилена — тобто сталася помилка.

правити

Загальний опис

Помилка в ланцюжку поводиться як м'яч, що котиться донизу: вона пропускає всі then і зупиняється в першому catch. Тому один catch() у кінці ловить збій із будь-якої ланки — окремий обробник після кожного кроку не потрібен.

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

І головна пастка: обіцянка без жодного catch проковтне помилку тихо. Браузер напише в консоль «unhandled rejection», але код нічого не помітить.

правити

Нотатка

У fetch catch ловить лише збій мережі. Відповідь 404 чи 500 — це успішна обіцянка: сервер відповів. Статус треба перевіряти самому через response.ok.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
catch	32+	29+	8+	19+	12+	-

Підтримка: мобільні переглядачі

Переглядач
catch	32+	yes	yes	8+

Приклади

+ запропонувати свій приклад у пісочниці

fetch('/api/user')
    .then(response => {
        // 404 — це НЕ помилка обіцянки, кидаємо самі
        if (!response.ok) {
            throw new Error('Статус ' + response.status);
        }

        return response.json();
    })
    .then(user => console.log(user.name))
    // ловить помилку з БУДЬ-ЯКОЇ ланки вище
    .catch(error => console.error('Не вдалося:', error.message));

// після catch ланцюжок оживає
Promise.reject(new Error('збій'))
    .catch(() => ({ name: 'Гість' })) // запасні дані
    .then(user => console.log(user.name)); // 'Гість'