Что такое fetch и что возвращает вызов response.json()?

Что такое fetch?

fetch — это встроенный в браузер API для выполнения HTTP-запросов. Он заменяет устаревший XMLHttpRequest и предоставляет более простой и гибкий интерфейс на основе Promise. fetch принимает URL и опциональный объект с настройками (метод, заголовки, тело запроса) и возвращает Promise, который разрешается в объект Response.

Что возвращает response.json()?

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

Пример использования

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

В этом примере fetch отправляет GET-запрос, затем проверяется статус ответа, и если всё в порядке, вызывается response.json() для извлечения данных. Обратите внимание, что response.json() сам по себе асинхронен, поэтому его нужно обрабатывать через .then() или await.

Вывод

fetch и response.json() — это основа для работы с HTTP в современных веб-приложениях. Они позволяют легко получать и отправлять данные в формате JSON, что особенно полезно при взаимодействии с REST API. Используйте их для асинхронной загрузки данных на клиенте.