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

Короткий ответ

Для обработки JSON-ответа в JavaScript используйте метод response.json(), который возвращает Promise с распарсенным объектом. В асинхронном контексте применяйте await response.json() внутри try/catch для обработки ошибок парсинга. Альтернативно - response.text() с последующим JSON.parse(), если нужен контроль над процессом. Всегда проверяйте response.ok перед парсингом.

Подробное объяснение

JSON-ответ обрабатывается через Fetch API, который возвращает объект Response. Основной метод - json(), который читает тело ответа как stream и парсит его. Важно понимать, что response.json() можно вызвать только один раз, так как stream потребляется однократно. Для повторного чтения используйте response.clone().

Парсинг включает два этапа: получение текста (через text()) и преобразование в объект (через JSON.parse()). Метод json() объединяет их, но при ошибке парсинга выбрасывает исключение с типом SyntaxError. Всегда проверяйте HTTP-статус через response.ok или response.status, чтобы не пытаться парсить ответ с ошибкой (например, 404 или 500).

Для работы с большими JSON-ответами используйте streaming через response.body.getReader(), но это редко требуется на практике. В современных приложениях также применяют response.json() с TypeScript для типизации результата.

На практике

В реальных проектах обработка JSON-ответа включает:

• Проверку статуса ответа перед парсингом
• Обработку ошибок сети и парсинга
• Типизацию ответа (через TypeScript или JSDoc)
• Обработку пустых ответов (204 No Content)
• Кеширование или отмену запросов при необходимости

Для REST API часто используют обёртку над fetch, которая автоматизирует проверку статуса и парсинг. В случае GraphQL ответ всегда приходит с HTTP 200, а ошибки содержатся в теле - это требует отдельной логики.

Пример кода

JAVASCRIPT
async function fetchData(url) {
  try {
    const response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    if (error instanceof SyntaxError) {
      console.error('Invalid JSON response');
    } else {
      console.error('Network error:', error.message);
    }
    throw error;
  }
}

// Использование с типизацией
async function getUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error('User not found');
  return response.json(); // Promise<User>
}

Как отвечать на собеседовании

Начните с базового механизма: response.json() и его Promise-природы. Затем перейдите к практическим аспектам - обработке ошибок, проверке статуса, однократному использованию stream. Упомяните альтернативы: response.text() + JSON.parse() для кастомной обработки, streaming для больших данных. Покажите понимание edge cases: пустой ответ, некорректный JSON, сетевые ошибки. Если используете TypeScript, добавьте про типизацию.

Что проверяет интервьюер

• Понимание асинхронности и Promise
• Знание Fetch API и Response объекта
• Умение обрабатывать ошибки разных типов
• Понимание stream и однократного потребления
• Практический опыт с реальными API

Типичные ошибки

• Не проверять response.ok перед парсингом
• Пытаться вызвать response.json() дважды
• Игнорировать ошибки парсинга JSON
• Не обрабатывать сетевые ошибки (отсутствие интернета)
• Использовать response.json() для не-JSON ответов без проверки Content-Type
• Забывать про await в асинхронных функциях