🥹 Не забувайте перевіряти статус код у відповіді сервера 🥹

Давайте подивимось на цей приклад:

fetch("").then(r=>r.json()).catch(console.log)

Що відбудеться, якщо сервер поверне нам відповідь з кодом, наприклад, 500?

Існує хибне очікування, що, у випадку, якщо сервер поверне не успішний статус код, then виконуватися не буде, а замість цього виконається одразу catch.

❗️Але fetch працює не так, тому що в then передається будь-який response, як успішний так і ні. Все інше, в том числі перевірки на успішність відповіді, покладаються на розробника.

✍️Зробити це можна або використавши властивість response.ok яка буде позитивною, якщо статус код серверу буде в проміжку 200 - 299, або перевірити властивість response.status для більш гранулярної обробки відповіді.

Якщо ж на це просто забити, то рано чи пізно ви отримаєте щось накшталт такого:

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

А щоб fetch працював більш прогнозовано, над ним можна зробити обгортку (або використати axios чи інші інструменти де це вже працює):

fetch("/").then((response) => {
  if (!response.ok) {
    throw new Error(response.status.toString(), { cause: response });
  }
  return response;
});

Тепер, якщо сервер поверне вам щось відмінне від 2ХХ - спрацює catch в якому буде код помилки та весь response якщо він вам таки треба.

❓До-речі, як ви думаєте, чому я повертаю саме response, а не response.json()?

@reactbeginners