Зачем нужен вызов response.json() при работе с fetch API?

Что такое response.json()?

При использовании fetch API для отправки HTTP-запроса, возвращается объект Response. Этот объект содержит информацию о статусе ответа, заголовках и методах для чтения тела ответа. Тело ответа не загружается сразу — оно представлено в виде потока (ReadableStream). Чтобы получить данные в формате JSON, необходимо вызвать метод json() на объекте Response.

Как это работает?

Метод json() читает поток тела ответа до конца, парсит его как JSON и возвращает промис, который разрешается с полученным объектом JavaScript. Это асинхронная операция, поэтому нужно использовать await или .then().

Пример кода

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // возвращает промис с JSON
  })
  .then(data => {
    console.log(data); // работаем с данными
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

Почему нельзя просто получить данные?

Объект Response предоставляет разные методы для чтения тела в зависимости от формата: json(), text(), blob(), formData() и arrayBuffer(). Выбор метода зависит от типа данных, которые ожидаются от сервера. Если сервер возвращает JSON, но вызвать text(), то получится строка, которую придется парсить вручную через JSON.parse().

Вывод

response.json() — это стандартный способ извлечения и парсинга JSON-данных из ответа fetch. Его использование обязательно, когда сервер возвращает данные в формате JSON, и позволяет безопасно и удобно работать с полученной информацией.