Почему fetch возвращает undefined, хотя данные точно есть — 3 причины

Знакомая сцена: открываешь вкладку Network в браузере — запрос ушёл, ответ пришёл, данные вот они. А в коде переменная — undefined. Данные есть, но твой код их не видит. Ощущение, будто врёт либо браузер, либо ты.

Не врёт никто. В 9 случаях из 10 виновата одна из трёх вещей, и все они не про «сервер сломался», а про то, как ты читаешь ответ. Пройдём по причинам сверху вниз — от самой частой.

Причина 1. Ты не дождался ответа (самая частая)

fetch — операция асинхронная: она уходит «в фон», а код бежит дальше, не дожидаясь. Если ты пытаешься прочитать данные сразу, они ещё в пути — вот и undefined.

Как проверить. Посмотри, есть ли перед запросом слово await (или .then). Если написано просто const data = fetch(...) без await — ты держишь в руках не данные, а «обещание» данных (Promise), которое ещё не выполнилось.

Как починить. Дождись ответа явно:

• было: const data = fetch(url) — данных нет, запрос ещё летит;
• стало: const res = await fetch(url) — строка ждёт, ответ приходит.

Помни: await работает только внутри функции, помеченной async. Забыл async у функции — await не сработает, и ты снова упрёшься в пустоту.

Причина 2. Ты не распаковал ответ (забыл .json())

Даже когда дождался, есть вторая ловушка. fetch возвращает не сами данные, а объект-ответ Response — конверт, внутри которого лежит письмо. Полезешь читать поле напрямую из конверта — получишь undefined, потому что письмо ещё не вскрыто.

Как проверить. Выведи ответ целиком: console.log(res). Если видишь объект Response со status, ok, headers, но без твоих полей — ты забыл вскрыть конверт.

Как починить. Распакуй тело ответа — обычно это JSON:

1. const res = await fetch(url) — получил конверт;
2. const data = await res.json() — вскрыл, достал письмо;
3. теперь data.name работает.

Обрати внимание: res.json() тоже асинхронный, ему тоже нужен await. И бери правильное поле: если сервер вернул { "user": { "name": ... } }, то имя лежит в data.user.name, а не в data.name. А «undefined» — это часто просто не тот путь к полю.

Причина 3. Запрос упал, а ты этого не заметил

Коварство fetch в том, что он не считает ошибкой ответ 404 или 500. Промис успешно выполнится даже на «страница не найдена» — просто внутри будет не то, чего ты ждёшь. Ты лезешь за данными, а там тело ошибки — снова undefined на твоём поле.

Как проверить. Глянь res.status и res.ok. ok: false или статус 404/500 значит: сервер ответил, но не тем. Причины бывают разные — ошибка 500 на сервере, неверный адрес, или браузер заблокировал ответ по CORS (тогда до данных ты и не доберёшься).

Как починить. Проверяй статус до того, как читать данные:

• если res.ok — распаковывай res.json();
• если нет — покажи ошибку, а не притворяйся, что данные есть.

Так ты перестанешь читать пустоту из упавшего запроса и сразу увидишь настоящую причину.

Быстрый чеклист

Когда снова видишь undefined, пробегись сверху вниз:

1. есть await перед fetch, и функция async?
2. есть await res.json() — конверт вскрыт?
3. res.ok — запрос точно удался?
4. поле берёшь по правильному пути (data.user.name, а не data.name)?

Одна из четырёх строк почти наверняка и есть твой баг.

Частые вопросы

Почему в Network ответ есть, а в коде undefined?

Потому что Network показывает, что пришло по сети, а undefined — это уже про то, как твой код это прочитал. Сеть отработала, а вот await, res.json() или проверка статуса — нет. Ищи ошибку не в сервере, а в трёх строках после fetch.

Нужно ли оборачивать fetch в try/catch?

Да, стоит. fetch бросает ошибку, если сеть вообще не отвечает (нет интернета, сервер недоступен). А вот 404/500 он ошибкой не считает — их лови вручную через res.ok. Итог: try/catch — на обрыв сети, res.ok — на «сервер ответил, но плохо».

Это баг ИИ, который писал код?

Не обязательно баг, но частый недосмотр. ИИ иногда генерит fetch без await или без проверки res.ok. Если код от ИИ даёт undefined — пройди те же три причины: почти всегда дело в одной из них.