Ось твій урок. Приготуйся, зараз буде цікаво!

🎓 Урок: Робота з API: fetch і axios

(Стиль CS50: Енергійно, зрозуміло, з фокусом на "навіщо")

1. 🔥 Вступ: Проблема «Ізольованого Острова»

Всім привіт! 👋

Уявіть, що ви створили геніальний додаток — "Прогноз погоди". Ви намалювали красивий інтерфейс: сонечко, хмаринки, градусник. Але є одна маленька проблема.

Ваш код працює у браузері користувача. А браузер користувача — це як ізольований острів. Він нічого не знає про те, яка зараз погода в Лондоні, Києві чи Нью-Йорку. У вашого ноутбука немає вбудованого датчика температури, який вимірює погоду за 5000 км звідси.

Питання до вас: Де ж тоді взяти ці дані?

Правильно. Вони зберігаються десь далеко, на потужному комп’ютері (сервері), який належить метеорологічній службі.

Проблема: Як вашому "острову" (браузеру) поспілкуватися з тим "материком" (сервером), щоб отримати заповітні "+20°C"? Вам потрібен міст. Вам потрібен кур'єр. Вам потрібен спосіб зробити HTTP-запит.

Сьогодні ми навчимося "дзвонити" на інші сервери і забирати звідти дані. Без цього будь-який сучасний сайт — це просто мертва картинка. Ми розглянемо два інструменти: вбудований fetch (як ваші власні ноги) і бібліотеку axios (як комфортне таксі).

Поїхали! 🚀

2. 🧠 Теоретична база (Що там під капотом?)

Перш ніж писати код, давайте розберемося з логікою.

Що таке API?

Уявіть ресторан. * Ви — це клієнт (Frontend). * Кухня — це сервер (Backend/Database). * Ви не можете просто забігти на кухню і почати ритися в холодильнику (це небезпечно!). * Вам потрібен офіціант.

API (Application Programming Interface) — це і є той офіціант. Ви даєте йому замовлення (Запит/Request), він йде на кухню, бере страву і приносить її вам (Відповідь/Response).

Як ми спілкуємося? (JSON)

Сервери та браузери часто написані на різних мовах програмування. Як їм зрозуміти одне одного? Вони використовують "міжнародну мову" — JSON (JavaScript Object Notation). Це просто текст, який виглядає як об'єкт JavaScript.

Fetch vs Axios

Тут у нас два гравці:

fetch: Це інструмент, який вже є у вашому браузері. Вам нічого не треба встановлювати. Це стандарт.
- Аналогія: Це як піти до магазину пішки. Надійно, безкоштовно, але якщо дощ (помилка) — доведеться самому відкривати парасольку.
axios: Це зовнішня бібліотека. Її треба підключити.
- Аналогія: Це Uber. Ви сідаєте, і водій (бібліотека) сам дбає про маршрут, кондиціонер і решту комфорту. Вона робить те саме, що й fetch, але пише менше коду і краще обробляє помилки.

❗️ Що треба запам'ятати залізно: Операції з мережею — асинхронні. Запит не відбувається миттєво. Поки дані летять через океан, ваш код не повинен "зависати". Тому ми будемо використовувати ключові слова async та await.

3. 🧪 Приклади (Кодимо!)

Для тестів ми будемо використовувати безкоштовний сервіс JSONPlaceholder — це фейковий API, який просто віддає тестові дані.

Рівень 1: Нативний `fetch`

Припустімо, ми хочемо отримати список користувачів.

Як ви думаєте, що поверне функція fetch, якщо ми просто викличемо її? Дані? Ні. Вона поверне "обіцянку" (Promise).

// ❌ Так робити не варто (старий стиль .then)
// ✅ Робимо сучасно: async/await

async function getUsersWithFetch() {
  try {
    // 1. Робимо запит. Чекаємо (await), поки офіціант повернеться до столика.
    const response = await fetch('https://jsonplaceholder.typicode.com/users');

    // 2. Офіціант прийшов. Але дані "запаковані".
    // Нам треба сказати: "Розпакуй це як JSON".
    // Це ТЕЖ займає час, тому знову await.
    const data = await response.json(); 

    console.log("Отримані дані (fetch):", data);
  } catch (error) {
    console.error("Ой, щось пішло не так:", error);
  }
}

getUsersWithFetch();

Чому тут два await? Це класичне питання на співбесіді. 1. Перший await чекає, поки сервер скаже "Привіт, я тебе почув, ось заголовки відповіді". 2. Другий await (.json()) чекає, поки завантажиться саме тіло відповіді (всі ці байти тексту).

Рівень 2: Зручний `axios`

Тепер давайте зробимо те саме, але через axios. Спочатку його треба підключити (через CDN або npm), але уявімо, що він у нас вже є.

// Якщо працюєте в HTML файлі, додайте в <head>:
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

async function getUsersWithAxios() {
  try {
    // Axios розумний. Він одразу робить запит і сам перетворює JSON на об'єкт.
    // Нам не треба писати .json()
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');

    // Дані лежать у властивості .data
    console.log("Отримані дані (axios):", response.data);
  } catch (error) {
    // Axios краще ловить помилки (наприклад, 404 Not Found)
    console.error("Помилка axios:", error.message);
  }
}

getUsersWithAxios();

Бачите різницю? Менше рухів тіла. Axios автоматично розпакував JSON і поклав результат у response.data.

4. 🛠 Практична частина

Прийшов час розім'яти пальці. Відкрийте консоль браузера або VS Code.

Завдання 1: "Copy-Paste майстер" 🔹 Скопіюйте код з прикладу getUsersWithFetch і запустіть його. Переконайтеся, що в консолі вивелось 10 користувачів.

Завдання 2: "Зміна маршруту" 🔹 Замініть URL у коді так, щоб отримати не користувачів (/users), а пости (/posts). Подивіться, як змінилася структура даних.

Завдання 3: "Детектив помилок" 🔹 У цьому коді є помилка. Він повертає Promise { <pending> } замість даних або взагалі падає. Виправте його:

async function getTodo() {
  const response = fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = response.json();
  console.log(data);
}

(Підказка: ми забули магічні слова, які змушують JavaScript чекати).

Завдання 4: "Реальна задача" 🔹 Напишіть функцію, яка: 1. Отримує дані про користувача з ID 1 (https://jsonplaceholder.typicode.com/users/1). 2. Виводить у консоль тільки його ім'я (name) та місто (address.city). 3. Використовуйте axios (або fetch, якщо ліньки підключати бібліотеку, але краще axios).

Завдання 5: "А що, якщо..." 🔹 Спробуйте зробити запит на неіснуючу адресу: https://jsonplaceholder.typicode.com/abrakadabra. Додайте блок try...catch. Що виведеться в консоль? Як fetch реагує на 404 помилку, а як axios? (Це завдання із зірочкою!).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі, дивлячись на код запитів?

Обробка помилок.
- Новачок: Думає, що сервер завжди працює і інтернет ідеальний. Не пише try...catch.
- Профі: Знає, що сервер впаде, Wi-Fi відвалиться, а користувач закриє ноутбук. Він завжди готовий зловити помилку і показати користувачеві гарне повідомлення "Щось пішло не так", а не білий екран.
Зайвий код.
- Якщо ви робите простий проєкт або скрипт на колінці — fetch ваш друг. Не тягніть важкі бібліотеки.
- Якщо це великий комерційний проєкт з купою запитів, авторизацією та токенами — беріть axios. Не винаходьте велосипед.
Мережева вкладка (Network Tab).
- Розробник живе не в консолі, а у вкладці "Network" в інструментах розробника (F12). Там видно все: що полетіло, що прилетіло, скільки часу це зайняло. Привчіть себе туди дивитися.

6. 🧩 Підсумок

Отже, що ми маємо на кінець уроку?

Сайт без API — це ізольований острів. API — це мости.
fetch — це вбудований, нативний спосіб робити запити. Трохи багатослівний (треба .json()), але працює всюди.
axios — це крута бібліотека-надбудова. Менше коду, зручніша робота з даними.
Завжди використовуємо async/await, щоб код був чистим і зрозумілим.

Що ви тепер вмієте? Ви вмієте витягувати реальні дані з мережі! Ви більше не обмежені даними, які самі прописали в коді.

🤔 Тизер наступного уроку: Окей, ми навчилися забирати дані (це називається GET-запит). Але як щодо того, щоб відправити дані? Як зареєструвати користувача або опублікувати коментар? На наступному уроці ми розберемо POST-запити і дізнаємося, як зламати (жартую, перевірити на міцність) серверну базу даних.

До зустрічі! 💻✨