Глава 4.1: Основы Fetch API

Время изучения: 45 минут

1. Fetch API: "Главная антенна" ЦУП

Представьте, что в вашем Центре Управления Полетами есть огромная радиоантенна для связи с космическими аппаратами. Вы можете настроить ее на нужную частоту, отправить команду и дождаться ответа.

Fetch API — это такая же "встроенная антенна" в современных браузерах. Это стандартный интерфейс JavaScript для выполнения HTTP-запросов к серверам. Он позволяет:

📡 Отправлять "команды" (GET, POST, PUT, DELETE) нашему API.
🛰️ Получать "телеметрию" (JSON-данные) с сервера.
⚙️ Работать асинхронно, не "замораживая" интерфейс пользователя в ожидании ответа.

💡 Космическая аналогия:

fetch() — это команда "Антенна, установить связь!". Вы передаете ей:

Координаты цели (URL нашего API).

Тип команды (метод: GET, POST).

Содержание команды (тело запроса, заголовки).

В ответ вы получаете не сами данные, а обещание (Promise), что данные придут.

2. Асинхронность: Связь на световых скоростях

Связь с далеким космическим кораблем занимает время. Вы не можете просто остановить всю работу ЦУП и ждать, пока придет ответ. Вы отправляете команду и продолжаете работать, а когда ответ придет, система оповестит вас.

Это и есть асинхронность. JavaScript не блокирует выполнение остального кода, пока ждет ответа от сервера. Для управления этим процессом Fetch API использует Промисы (Promises).

Промис (Promise) — это "квитанция" о том, что вы отправили запрос. У нее есть три состояния:

pending (в ожидании): Сигнал еще в пути.
fulfilled (выполнен): Ответ получен успешно!
rejected (отклонен): Произошла ошибка (например, нет связи).

3. Первый запрос: Узнаем, где МКС

Давайте отправим наш первый запрос с помощью fetch. Мы будем использовать просто HTML-файл и теги <script>.

Шаг 1: Создаем index.html Создайте в новой папке (например, frontend_fleet_control) файл index.html.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>ЦУП - Fetch API</title>
</head>
<body>
    <h1>Статус связи с МКС</h1>
    <div id="iss-status">Ожидание данных...</div>

    <script>
        // Наш JavaScript код будет здесь
    </script>
</body>
</html>

Шаг 2: Пишем код с fetch Внутри тега <script> добавим наш первый fetch-запрос к публичному API Open Notify.

// index.html -> <script>

const issApiUrl = 'http://api.open-notify.org/iss-now.json';
const statusDiv = document.getElementById('iss-status');

console.log('Отправляем запрос на получение координат МКС...');

fetch(issApiUrl)
    .then(response => {
        // Первый .then() обрабатывает сам HTTP-ответ
        console.log('Получен ответ от сервера!', response);
        // Преобразуем тело ответа в JSON, это тоже асинхронная операция
        return response.json();
    })
    .then(data => {
        // Второй .then() получает уже распарсенные JSON-данные
        console.log('Данные успешно преобразованы в JSON!', data);
        const position = data.iss_position;
        statusDiv.innerHTML = `МКС сейчас находится здесь:
                               <strong>Широта:</strong> ${position.latitude},
                               <strong>Долгота:</strong> ${position.longitude}`;
    })
    .catch(error => {
        // .catch() сработает, если произошла ошибка сети
        console.error('Ошибка связи с МКС!', error);
        statusDiv.textContent = 'Не удалось получить данные. Проверьте соединение.';
    });

fetch(url): Отправляет GET-запрос. Возвращает промис.
.then(callback): Выполняется, когда промис успешно разрешен (fulfilled). Первый .then получает объект Response.
response.json(): Метод, который читает тело ответа и парсит его как JSON. Он тоже возвращает промис!
.catch(callback): Выполняется, если промис отклонен (rejected), например, из-за ошибки сети.

Шаг 3: Открываем в браузере Просто откройте файл index.html в вашем браузере. Вы должны увидеть, как "Ожидание данных..." сменяется на текущие координаты МКС. Откройте консоль разработчика (F12), чтобы увидеть логи.

4. "Что, если...": Обработка ошибок сервера

Что если мы запросим несуществующий URL? fetch('http://api.open-notify.org/non-existent-endpoint')

fetch устроен так, что .catch() сработает только при сетевых ошибках (нет интернета, DNS не найден). А вот ответы с кодами 404 или 500 для fetch — это успешно полученный ответ! Просто он содержит код ошибки.

Правильный способ проверки:

fetch('http://api.open-notify.org/non-existent-endpoint')
    .then(response => {
        // Проверяем свойство .ok, которое равно true для статусов 200-299
        if (!response.ok) {
            // Если ответ не "ОК", создаем свою ошибку, чтобы перейти в .catch()
            throw new Error(`Ошибка HTTP! Статус: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Произошла ошибка при выполнении запроса:', error);
    });

response.ok: Это ваш главный индикатор успеха.
throw new Error(): Мы вручную "проваливаем" цепочку промисов, чтобы попасть в блок .catch.

Квиз для закрепления

🚀 Итог главы:

Вы настроили "главную антенну" своего ЦУП и научились отправлять запросы и принимать ответы.

📡 Вы освоили базовый синтаксис fetch().
🛰️ Поняли, что такое Промисы (Promises) и как работать с .then() и .catch().
⚙️ Научились правильно обрабатывать ответы сервера, проверяя response.ok.

Связь установлена! В следующей главе мы подключим наш ЦУП к API космического флота, которое мы создали на FastAPI, и научимся получать и отображать список наших кораблей.

📌 Проверка:

Убедитесь, что ваш файл index.html корректно отображает координаты МКС.

Попробуйте намеренно сломать URL и посмотрите в консоли разработчика, какая ошибка будет выведена.

⚠️ Если код не работает:

CORS Error: Если вы пытаетесь сделать запрос к своему локальному FastAPI API (например, http://127.0.0.1:8000) из файла, открытого как file:///..., браузер заблокирует запрос из-за политики безопасности CORS. Мы решим эту проблему в следующей главе. Пока что мы используем публичные API, которые это разрешают.

HTTP/HTTPS: http://api.open-notify.org работает по HTTP. Некоторые браузеры могут предупреждать об этом. Если вы работаете с HTTPS-сайта, запросы к HTTP-ресурсам могут блокироваться.