Fetch API

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

История

До появления Fetch API основным средством для выполнения асинхронных HTTP-запросов в веб-браузерах был объект XMLHttpRequest, который был создан компанией Microsoft в 1999 году для Internet Explorer 5.0. Несмотря на широкое распространение, XMLHttpRequest имел ряд недостатков: сложный синтаксис, отсутствие поддержки Promise, необходимость обработки событий, а также неудобную работу с потоками данных и прогрессом загрузки.

Fetch API был разработан как часть спецификации WHATWG (Web Hypertext Application Technology Working Group) и впервые реализован в браузере Google Chrome 42 в 2015 году. В 2017 году Fetch API был включён в спецификацию ECMAScript как часть стандарта Web API. К 2018 году поддержка Fetch API появилась во всех основных браузерах (Firefox, Safari, Edge). В 2020 году в спецификацию были добавлены расширения, такие как AbortController для отмены запросов и ReadableStream для потоковой обработки данных.

Основные характеристики

Асинхронность и Promise

Fetch API возвращает объект Promise, который разрешается в объект Response после получения ответа от сервера. Это позволяет использовать цепочки методов .then() и .catch(), а также синтаксис async/await для обработки асинхронных операций. В отличие от XMLHttpRequest, Fetch API не блокирует основной поток выполнения.

Поддержка HTTP-методов

Fetch API поддерживает все стандартные HTTP-методы, включая GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, CONNECT и TRACE. Метод и другие параметры запроса задаются в объекте init второго аргумента функции fetch().

Работа с заголовками

Заголовки запроса и ответа обрабатываются через объект Headers, который предоставляет методы для добавления, удаления и проверки заголовков. Объект Headers является итерируемым и поддерживает регистронезависимые ключи.

Различные типы данных

Fetch API позволяет отправлять и получать данные в различных форматах:

• JSON (через метод response.json())
• Текст (через response.text())
• Blob (через response.blob())
• ArrayBuffer (через response.arrayBuffer())
• FormData (через response.formData())
• Потоковые данные (через response.body как ReadableStream)

Кросс-доменные запросы

Fetch API поддерживает кросс-доменные запросы (CORS) при условии, что сервер возвращает соответствующие заголовки (Access-Control-Allow-Origin). Для запросов с изменёнными заголовками или методами, отличными от GET, HEAD и POST, браузер выполняет предварительный запрос (preflight) с методом OPTIONS.

Синтаксис

Базовый синтаксис Fetch API:

``javascript fetch(url, options) .then(response => { // обработка ответа }) .catch(error => { // обработка ошибки }); ``

Параметры:

• url (обязательный) — строка или объект Request, содержащий URL запроса.
• options (необязательный) — объект, содержащий настройки запроса:
• method — HTTP-метод (по умолчанию GET)
• headers — объект или экземпляр Headers с заголовками
• body — тело запроса (для методов POST, PUT, PATCH)
• mode — режим запроса (cors, no-cors, same-origin)
• credentials — режим отправки куки (omit, same-origin, include)
• cache — режим кэширования
• redirect — режим обработки перенаправлений (follow, error, manual)
• signal — объект AbortSignal для отмены запроса

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

Простой GET-запрос

``javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Ошибка:', error)); ``

POST-запрос с JSON

``javascript fetch('https://api.example.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Иван', age: 30 }) }) .then(response => response.json()) .then(data => console.log(data)); ``

Использование async/await

``javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const data = await response.json(); return data; } catch (error) { console.error('Ошибка при загрузке данных:', error); } } ``

Отмена запроса с помощью AbortController

```javascript const controller = new AbortController(); const signal = controller.signal;

fetch('https://api.example.com/large-file', { signal }) .then(response => response.text()) .then(data => console.log(data)) .catch(error => { if (error.name === 'AbortError') { console.log('Запрос отменён'); } else { console.error('Ошибка:', error); } });

// Отмена запроса через 5 секунд setTimeout(() => controller.abort(), 5000); ```

Особенности и ограничения

Обработка ошибок HTTP

Fetch API не считает HTTP-ошибки (например, 404 или 500) исключениями. Promise разрешается успешно, даже если сервер вернул код ошибки. Для обработки таких ситуаций необходимо проверять свойство response.ok или response.status:

``javascript fetch('https://api.example.com/not-found') .then(response => { if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } return response.json(); }); ``

Отсутствие поддержки прогресса

В отличие от XMLHttpRequest, Fetch API не предоставляет встроенного механизма отслеживания прогресса загрузки или отправки данных. Для получения информации о прогрессе необходимо использовать ReadableStream или сторонние библиотеки.

Ограничения на отправку данных

Fetch API не поддерживает отправку данных в формате multipart/form-data без использования объекта FormData. Для отправки файлов необходимо создать экземпляр FormData и добавить в него файлы.

Cookie и credentials

По умолчанию Fetch API не отправляет куки и не использует HTTP-аутентификацию для кросс-доменных запросов. Для включения отправки куки необходимо установить credentials: 'include' в настройках запроса.

Применение

Fetch API широко используется в современной веб-разработке для:

• Получения данных с сервера (REST API, GraphQL)
• Отправки форм и файлов
• Взаимодействия с микросервисами
• Реализации Single Page Applications (SPA)
• Создания прогрессивных веб-приложений (PWA)
• Работы с серверными событиями (Server-Sent Events)

Поддержка браузерами

Fetch API поддерживается всеми современными браузерами, включая:

• Google Chrome (версия 42+)
• Mozilla Firefox (версия 39+)
• Apple Safari (версия 10.1+)
• Microsoft Edge (версия 14+)
• Opera (версия 29+)

Internet Explorer не поддерживает Fetch API. Для работы в старых браузерах используются полифиллы, такие как whatwg-fetch или isomorphic-fetch.

Сравнение с XMLHttpRequest

Интересные факты

• Fetch API является частью спецификации WHATWG Living Standard, которая постоянно обновляется.
• В 2021 году в Fetch API была добавлена поддержка Request и Response объектов для создания цепочек запросов.
• Fetch API может использоваться не только в браузерах, но и в среде Node.js через пакет node-fetch.
• Метод response.json() автоматически парсит JSON-строку, но при этом не проверяет корректность данных — при невалидном JSON выбрасывается исключение.
• Fetch API поддерживает работу с Blob для загрузки бинарных данных, таких как изображения и видео.

Источники

• WHATWG Fetch Living Standard
• MDN Web Docs: Fetch API
• ECMAScript Specification: Web API
• Google Developers: Introduction to Fetch
• Mozilla Hacks: Fetch API — The Future of AJAX