10. Fetch API

Иллюстрация к уроку

Fetch API – это современный интерфейс для выполнения сетевых запросов в JavaScript. Он предоставляет более гибкий и мощный способ работы с запросами по сравнению со старым XMLHttpRequest (XHR).

Что такое Fetch API?

Fetch API позволяет вашему JavaScript-коду получать ресурсы (например, данные JSON, HTML, изображения) с сервера. Представьте, что это курьер, который отправляется на сервер за информацией и возвращает её вам. Основное отличие от XHR – использование Promise для обработки результатов, что делает код более читаемым и удобным для обработки асинхронных операций.

Базовый пример использования

Простейший пример использования fetch выглядит так:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json()) // Преобразуем ответ в JSON
  .then(data => console.log(data)) // Выводим полученные данные в консоль
  .catch(error => console.error('Ошибка:', error)); // Обрабатываем возможные ошибки

В этом примере:

fetch('https://jsonplaceholder.typicode.com/todos/1') отправляет GET-запрос по указанному URL.
.then(response => response.json()) обрабатывает полученный ответ. response.json() асинхронно преобразует тело ответа в объект JavaScript.
.then(data => console.log(data)) обрабатывает полученные данные JSON.
.catch(error => console.error('Ошибка:', error)) перехватывает любые ошибки, возникшие в процессе.

Отправка POST-запроса

Для отправки данных на сервер (например, при создании новой записи) используется POST-запрос.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

В этом примере:

method: 'POST' указывает тип запроса.
body: JSON.stringify(...) содержит данные, которые отправляются на сервер. Их нужно преобразовать в строку JSON.
headers: ... определяет заголовки запроса, в частности, Content-type указывает, что мы отправляем JSON.

Работа с другими типами данных

Fetch API может работать не только с JSON. Можно получить текст, blob (двоичные данные, например, изображение), FormData (для отправки файлов) и т.д. Например, для получения текста:

fetch('https://example.com/textfile.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(error => console.error('Ошибка:', error));

Жизненный пример

Fetch API используется практически во всех современных веб-приложениях и фреймворках для работы с данными. Например:

React, Angular, Vue.js: Fetch API часто используется для получения данных с API и отображения их в компонентах.
Интернет-магазины: Для получения списка товаров, информации о конкретном товаре, отправки данных о заказе.
Социальные сети: Для получения новостной ленты, информации о пользователе, отправки сообщений.
Backend as a Service (BaaS): Сервисы вроде Firebase, Supabase и другие предоставляют API, с которыми взаимодействуют через Fetch.

Ключевые моменты

Fetch API основан на Promise, что упрощает обработку асинхронных операций.
Он более гибкий и мощный, чем XMLHttpRequest.
Позволяет отправлять различные типы запросов (GET, POST, PUT, DELETE и т.д.).
Поддерживает работу с различными типами данных (JSON, текст, Blob, FormData).
Необходимо обрабатывать ошибки с помощью .catch().
Обязательно конвертируйте данные в JSON (или другой формат), если необходимо.

🔗 Connected Topics

Практика

Попробуйте примеры в интерактивном редакторе: