fetch API: отправка HTTP-запросов и получение данных

Что такое fetch и зачем он нужен? 🌐

Представь, что твоя веб-страница — это остров, а данные — это сокровища на других островах. Чтобы их получить, нужен мост. fetch() — это как раз такой мост! Он позволяет отправлять HTTP-запросы к серверам и получать от них данные без перезагрузки страницы.

// Простейший fetch-запрос
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

🔥 Важно: fetch() возвращает Promise, поэтому работа с ним строится через .then() и .catch() или через async/await.

Базовый синтаксис: GET-запросы 🏗️

GET-запросы — это как вопрос: "Эй, сервер, дай мне данные!" Рассмотрим пример с реальным API:

// Получаем данные о пользователе GitHub
fetch('https://api.github.com/users/danilabe')
  .then(response => {
    if (!response.ok) {
      throw new Error('Ошибка HTTP: ' + response.status);
    }
    return response.json();
  })
  .then(userData => {
    console.log(`Имя: ${userData.name}`);
    console.log(`Репозитории: ${userData.public_repos}`);
  })
  .catch(error => console.error('Ошибка:', error));

Обрати внимание на проверку response.ok — это важно для обработки ошибок!

POST, PUT, DELETE: не только получаем, но и отправляем! 📤

POST-запрос с отправкой данных:

// Отправляем новые данные на сервер
fetch('https://api.example.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'Мой новый пост',
    content: 'Привет, fetch API!'
  })
})
.then(response => response.json())
.then(data => console.log('Успех:', data))
.catch(error => console.error('Ошибка:', error));

Ключевые параметры:

method: HTTP-метод (GET, POST, PUT, DELETE)
headers: метаданные запроса
body: данные для отправки (обязательно строки!)

Работа с заголовками и авторизацией 🔐

Часто API требуют авторизации. Вот как отправить запрос с токеном:

fetch('https://api.example.com/private-data', {
  headers: {
    'Authorization': 'Bearer your_token_here',
    'Custom-Header': 'value'
  }
})
.then(/* ... */);

💡 Совет: Храни секретные ключи в переменных окружения, а не в коде!

Обработка разных типов ответов 🎭

Сервер может отвечать не только JSON. Вот как обработать разные форматы:

// Текст
fetch('text-file.txt')
  .then(response => response.text())
  .then(text => console.log(text));

// Бинарные данные (например, изображение)
fetch('image.png')
  .then(response => response.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  });

Продвинутые техники: AbortController и таймауты ⏱️

Иногда нужно прервать долгий запрос. Для этого есть AbortController:

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

// Запрос с возможностью отмены
fetch('https://api.example.com/slow-data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос отменён!');
    }
  });

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

Практический пример: мини-приложение погоды 🌦️

Давай соберём всё вместе и создадим простой виджет погоды:

async function getWeather(city) {
  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
    );
    const data = await response.json();

    console.log(`Погода в ${city}:`);
    console.log(`🌡️ Температура: ${data.main.temp}°C`);
    console.log(`💨 Ветер: ${data.wind.speed} м/с`);
  } catch (error) {
    console.error('Не удалось получить данные:', error);
  }
}

getWeather('Moscow');

Частые ошибки и как их избежать 🚧

Забывают проверять response.ok:
Всегда проверяй статус ответа перед обработкой данных!
Не обрабатывают ошибки сети:
Добавляй .catch() или используй try/catch с async/await.
Путают Promise и данные:
Помни — fetch возвращает Promise, а не сами данные!

Если хочешь глубже разобрать ошибки — глянь разборы Данилы Бежина на YouTube. Он мастерски объясняет тонкости!

Что дальше? 🚀

Теперь ты вооружён знаниями для работы с внешними данными! Попробуй: - Создать простое приложение с использованием публичного API - Поэкспериментировать с разными типами запросов - Изучить более продвинутые возможности Fetch API

Главное — практикуйся! Каждый запрос делает тебя на шаг ближе к мастерству веб-разработки. 💪