Как обрабатывать JSON ответ в JavaScript

Что проверяют

Знаете ли вы путь от запроса до данных и что ломается на каждом шаге. Главная проверка: понимаете ли вы, что fetch не бросает ошибку на 404 и 500, и умеете ли не доверять ответу сервера. Следом часто просят разобрать ошибку парсинга или отмену запроса.

Как отвечать

• запрос и статус: fetch отклоняет промис только при сетевой ошибке или отмене. Ответ 404 или 500 приходит как обычный Response, поэтому сначала проверяется response.ok (статус 200-299), и только потом разбирается тело;
• парсинг: await response.json() читает тело и разбирает его как JSON. Тело читается один раз, повторный вызов бросит TypeError. На пустом ответе 204 или на HTML-странице ошибки от прокси парсинг упадёт с SyntaxError, поэтому полезно смотреть Content-Type;
• ручной разбор: JSON.parse(text) для строки, всегда в try/catch. Второй аргумент reviver позволяет, например, превратить строки дат в Date;
• валидация: тип TypeScript на результате response.json() ничего не проверяет в рантайме. Ответ внешнего API валидируют схемой (Zod, Valibot) и получают понятную ошибку вместо undefined глубоко в компоненте;
• подводные камни формата: даты приходят строками, целые больше Number.MAX_SAFE_INTEGER теряют точность (идентификаторы лучше передавать строками), а undefined и функции при JSON.stringify пропадают;
• отмена и таймаут: AbortController или AbortSignal.timeout(ms), чтобы ответ устаревшего запроса не перезаписал свежие данные.

В реальном приложении такую обёртку пишут один раз, а в компонентах используют через TanStack Query, SWR или свой хук, где уже есть состояния загрузки и ошибки.

Где спотыкаются

Не проверяют response.ok и пытаются разобрать страницу ошибки как JSON. В консоли появляется загадочное Unexpected token '<'.

Обрабатывают ошибку одним console.error. Пользователь видит вечный спиннер, потому что состояние ошибки в интерфейс не выведено.

Путают JSON.parse и response.json() и вызывают JSON.parse на уже разобранном объекте: он превращается в строку [object Object], и парсинг падает на ровном месте.