Fetch API: загрузка файлов, изображений, JSON и др.

Что такое Fetch API и зачем он нужен?

Fetch API — это современный JavaScript-интерфейс для работы с HTTP-запросами. Он пришёл на смену устаревшему XMLHttpRequest и предлагает более удобный синтаксис на основе промисов.

С его помощью можно:
✔ Загружать JSON-данные с сервера
✔ Отправлять формы и файлы
✔ Получать бинарные данные (изображения, PDF и др.)
✔ Работать с REST API

Базовый синтаксис fetch()

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

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

Разберём по шагам:
1. fetch(url) делает GET-запрос по указанному адресу.
2. .then(response => response.json()) преобразует ответ в JSON.
3. Последующий .then() получает уже распарсенные данные.

🔥 Важно: fetch() не считает HTTP-ошибки (404, 500) за reject — промис завершится успешно, но response.ok будет false.

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

1. Загрузка JSON

Самый частый сценарий — получение структурированных данных:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) throw new Error('Сервер ответил ошибкой');
    return response.json();
  })
  .then(post => {
    console.log('Заголовок:', post.title);
  });

2. Загрузка изображений (бинарные данные)

Для работы с картинками используем response.blob():

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.append(img);
  });

3. Текстовые файлы

Если сервер возвращает plain text (например, CSV):

fetch('data.txt')
  .then(response => response.text())
  .then(text => console.log(text));

Отправка данных на сервер

POST-запрос с JSON

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Алексей',
    age: 30
  })
});

Загрузка файлов (FormData)

Идеально для отправки файлов через <input type="file">:

const formData = new FormData();
formData.append('avatar', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData
});

💡 При использовании FormData не указывайте заголовок Content-Type — браузер сделает это сам с правильным boundary!

Продвинутые настройки

1. Отмена запроса с AbortController

Чтобы прервать долгий запрос:

const controller = new AbortController();

fetch('big-file.zip', {
  signal: controller.signal
})
  .then(response => response.blob())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос отменён!');
    }
  });

// Через 5 секунд отменяем
setTimeout(() => controller.abort(), 5000);

2. Авторизация через заголовки

Добавляем токен в Authorization:

fetch('/private-data', {
  headers: {
    'Authorization': `Bearer ${accessToken}`
  }
});

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

Правильный подход — проверять и статус ответа, и сетевые ошибки:

async function loadData() {
  try {
    const response = await fetch('/data');

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

    return await response.json();
  } catch (error) {
    console.error('Ошибка загрузки:', error);
    // Можно показать уведомление пользователю
  }
}

Практический пример: загрузчик файлов

Создадим полноценный компонент для загрузки:

const uploadForm = document.getElementById('upload-form');
const progressBar = document.getElementById('progress');

uploadForm.addEventListener('submit', async (e) => {
  e.preventDefault();

  const formData = new FormData(uploadForm);
  const response = await fetch('/upload', {
    method: 'POST',
    body: formData,
    // Отслеживаем прогресс
    onUploadProgress: (progressEvent) => {
      const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
      progressBar.style.width = `${percent}%`;
    }
  });

  if (response.ok) {
    alert('Файл успешно загружен!');
  }
});

Итоги

Fetch API — мощный инструмент для HTTP-запросов с поддержкой промисов
Умеет работать с JSON, текстом, бинарными данными и FormData
Позволяет настраивать заголовки, метод и тело запроса
Поддерживает отмену операций через AbortController

Теперь вы готовы интегрировать любые API в свои проекты! 🎯 Для углубленного изучения смотрите курс Данилы Бежина по современному JavaScript.