IT Загрузка..
IT Загрузка..
Читать в Telegram

Fetch API и работа с HTTP в браузере

IT Загрузка..

Мы просто и по делу рассказываем про ИИ-инструменты для работы: сравнения, пошаговые гайды, бесплатные альтернативы и реальные сценарии применения. Помогаем выбрать между ChatGPT, Gemini, Claude, локальными моделями и десятками узкоспециализированных сервисов — от дизайна и HR до аналитики и SEO. Меньше хайпа, больше практики и экономии времени каждый день.

Открыть в TelegramДругие публикации
fetch apihttpcors

Fetch API — стандартный способ отправлять HTTP-запросы из браузера на сервер. Его используют для получения данных из REST API, отправки форм, авторизации, загрузки файлов и построения интерактивных веб-приложений.

Что такое Fetch API

Это встроенный браузерный интерфейс для выполнения запросов по сети. В отличие от XMLHttpRequest, fetch() работает на Promise, код получается чище и удобнее для async/await.

const response = await fetch('/api/users');
const data = await response.json();
console.log(data);

Как работает HTTP в Fetch

Через fetch() можно управлять основными параметрами HTTP-запроса:

  • method — метод: GET, POST, PUT, DELETE
  • headers — заголовки
  • body — тело запроса
  • credentials — куки и авторизация
  • mode — поведение CORS
const response = await fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'user@mail.com',
    password: '123456'
  })
});

Важно: fetch не считает 404 и 500 ошибкой Promise

Promise отклоняется только при сетевой ошибке. Поэтому статус нужно проверять вручную:

const response = await fetch('/api/data');

if (!response.ok) {
  throw new Error(`HTTP error: ${response.status}`);
}

const result = await response.json();

Частые форматы ответа 📦

Fetch умеет читать ответ разными способами:

  • response.json() — JSON
  • response.text() — текст
  • response.blob() — файлы и изображения
  • response.formData() — данные формы

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

Для API с авторизацией часто передают Bearer Token:

const response = await fetch('/api/profile', {
  headers: {
    Authorization: 'Bearer token_here'
  }
});

CORS и почему запрос может не пройти 🚫

Если фронтенд и API находятся на разных доменах, браузер проверяет политику CORS. Даже если сервер доступен, запрос может быть заблокирован, если сервер не вернул нужные заголовки вроде:

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Headers

Это частая причина ошибки “Failed to fetch”.

Обработка ошибок на практике 🛠️

try {
  const response = await fetch('/api/users');

  if (!response.ok) {
    throw new Error(`Status: ${response.status}`);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error('Ошибка запроса:', error);
}

Что важно помнить

  • fetch() асинхронный
  • по умолчанию метод — GET
  • для JSON почти всегда нужен Content-Type: application/json
  • HTTP-ошибки нужно проверять через response.ok
  • CORS ограничивает кросс-доменные запросы
  • для отмены запроса используют AbortController

Fetch API — базовый инструмент современной веб-разработки. Понимание HTTP-методов, статусов, заголовков и обработки ошибок помогает писать стабильный фронтенд, который корректно работает с любым API. 💻

Заодно загляните в подборку каналов про IT — там много полезного по фронтенду, бэкенду, DevOps и разработке в целом.

Читайте так же