🌤️ Уявіть: ви хочете показати свіжу погоду на сайті, але не хочете, щоб користувач щоразу перезавантажував сторінку. Або ж ви створюєте блог, де нові коментарі з’являються автоматично. 📝 Як це зробити?
💡 Відповідь проста — Fetch API. Це вбудований інструмент JavaScript, який дозволяє "попросити" дані з інтернету, ніби надіслати листа 📮, і отримати відповідь — швидко ⚡, просто 🎯 і без зайвих складнощів.
🚀 У цій статті ми разом пройдемо від першого запиту до повноцінного прикладу. Готові? Поїхали! 🎢
⚡ Коротко
- ✅ Fetch API — це сучасний спосіб робити запити до сервера з JavaScript. Працює прямо в браузері, без додаткових бібліотек. 🌐
- ✅ Основні методи: GET, POST, PUT, DELETE — як "попросити", "надіслати", "оновити" і "видалити" інформацію. 📨
- ✅ Використовує "обіцянки" (Promises) — код не "зависає", поки чекає відповідь. ⏳
- 🎯 Ви отримаєте: повний покроковий гайд з прикладами, які можна скопіювати та запустити за 5 хвилин. 🚀
- 👇 Детальніше читайте нижче — з аналогіями з життя, кодом і поясненнями. 📚
📋 Зміст статті:
⸻
Що таке Fetch API і чому він потрібен?
🌉 "Fetch API — це міст між вашим кодом і інтернетом. Як поштовий голуб 🕊️, який летить за даними і повертається з відповіддю."
⚡ Проблема старих методів
⌛ Раніше, щоб отримати дані з сервера, використовували XMLHttpRequest. Це було схоже на те, якби ви телефонували в ресторан, щоб замовити піцу 🍕, але оператор ставив вас на утримання, змушував чекати, і ви не могли нікуди піти, поки не отримаєте відповідь. Усе зависало. Сайт "морозився". Користувач нервував 😫.
💬 А тепер уявіть: ви пишете SMS офіціанту: "Принесіть меню". Ви відправляєте повідомлення 📱 і продовжуєте розмовляти з друзями. Коли офіціант прийде — ви подивитеся меню. Це і є асинхронність. Саме так працює Fetch API.
- ✅ Не блокує сторінку: користувач може клікати, скролити, писати — усе працює
- ✅ Вбудований у браузер: не треба нічого встановлювати 🌐
- ✅ Простіший синтаксис: менше коду, ніж у XMLHttpRequest 📝
👨💻 Приклад з життя: Ви заходите в кафе ☕. Замість того, щоб стояти в черзі до каси, ви скануєте QR-код на столі — і меню з’являється на телефоні. Це і є Fetch: ви "запитали" — отримали — не чекали.
⚠️ Важливо: Fetch працює тільки в сучасних браузерах (Chrome, Firefox, Safari, Edge). Для старих (IE) потрібні альтернативи — але 99% користувачів уже на нових.
💬 Моя думка: Fetch API — це один із найзручніших інструментів для роботи з даними на сайті. Він простий у використанні, не перевантажує сторінку та працює у фоні, роблячи веб-досвід значно плавнішим.
⸻
Що таке API? Проста аналогія з рестораном
API — це не страшно. Це просто "послуга", яку надає сервер. Як меню в ресторані.
Аналогія: Ви в ресторані
Уявіть: ви сидите за столиком. Офіціант підходить і дає меню — це і є API. У меню написано:
- 🍕 Піца Маргарита — 120 грн
- 🥗 Салат Цезар — 90 грн
- ☕ Кава — 35 грн
Ви кажете: "Одну піцу, будь ласка". Офіціант іде на кухню, кухар готує, офіціант приносить. Ви отримали відповідь.
| Дія в ресторані | Дія в коді (Fetch) |
|---|
| Попросити меню | GET-запит |
| Зробити замовлення | POST-запит |
| Змінити замовлення | PUT-запит |
| Скасувати страву | DELETE-запит |
Приклад з життя: Ви користуєтесь Google Maps. Ви вводите "покажи кафе поруч" — це GET-запит до API Google. Ви отримуєте список кафе. Ви натискаєте "Замовити таксі" — це POST-запит до API Uber.
Я вважаю: API — це меню сервера. Fetch — це ваш голос, яким ви робите замовлення. А сервер — це кухня, що готує відповідь.
Посилання на безкоштовний API для практики: JSONPlaceholder — ідеально для новачків.
⸻
Рекомендовані статті для глибшого занурення
Хочете дізнатися більше про сучасну веб-розробку, SEO та технології? Ось добірка моїх найкращих матеріалів — кожна стаття написана для новачків, але з глибокими інсайтами для практики:
Java де сьогодні використовують та чи варто вивчати?
— Огляд реального застосування Java у 2025 році: від банківських систем до Android-додатків. Дізнайтесь, чи варто інвестувати час у цю мову.
Що таке CAPTCHA: повний посібник з захисту від ботів
— Усе про CAPTCHA: як працюють, які типи бувають, як обійти (і чому не треба), та як створити власну систему захисту.
Заголовки H1-H6 для SEO: Як правильно структурувати контент
— Покроковий гайд: як використовувати заголовки, щоб Google кохав ваш сайт, а читачі — легко знаходили потрібне.
Open Graph: Повний гайд для SEO та соціальних мереж 2025
— Як зробити, щоб ваші статті виглядали красиво у Facebook, LinkedIn, Telegram — з картинкою, заголовком і описом. Працює на кліки!
Перший запит: GET — як попросити меню
Почнемо з найпростішого — GET-запиту. Це коли ми просимо дані, але нічого не надсилаємо.
Синтаксис: як виглядає запит
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('Помилка:', error));
🛎️ Розберемо по частинах, як офіціанта:
- 📨
fetch('URL') — "Офіціанте, принесіть меню з цієї адреси!" - ⏳
.then(response => ...) — "Коли принесете — я подивлюся" - 📦
response.json() — "Розпакуйте посилку, там JSON" - 🎯
.then(data => ...) — "Ось дані! Покажіть у консолі" - ⚠️
.catch() — "Якщо офіціант не прийде — скажіть, що сталася помилка"
Приклад з життя: Ви заходите на сайт погоди. Браузер автоматично робить GET-запит: "Дай температуру в Києві". Сервер відповідає: "18°C, сонячно". Температура з’являється на екрані — без перезавантаження.
Практика: виведемо 5 постів у консоль
<body>
<h1>Останні пости</h1>
<script>
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(posts => {
posts.slice(0, 5).forEach(post => {
console.log(`Заголовок: ${post.title}`);
});
});
</script>
</body>
Швидкий висновок: GET-запит — це простий спосіб "попросити" дані. Fetch повертає "обіцянку", яку ми обробляємо через .then().
⸻
Робота з JSON: як розпакувати "посилку" з даними
Більшість API повертають дані у форматі JSON (JavaScript Object Notation). Це як записна книжка: ключ → значення.
Що таке JSON?
{
"id": 1,
"title": "Привіт, світ!",
"body": "Це мій перший пост.",
"userId": 1
}
📋 Це об’єкт. Ми можемо звертатися до полів: data.title, data.body.
🎁 Як "розпакувати" відповідь?
Fetch повертає Response — це "посилка". Щоб дістати вміст, треба:
- 📄
response.text() — якщо текст - 📊
response.json() — якщо JSON (найчастіше) - 🖼️
response.blob() — якщо картинка
📦 Приклад з життя: Ви отримали посилку від "Нової Пошти". Зовні — коробка (Response). Всередині — подарунок у гарній упаковці (JSON). Ви відкриваєте — і бачите книгу 📚. Тепер можна читати.
Покажемо пости на сторінці
<script>
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(posts => {
const list = document.getElementById('posts');
posts.slice(0, 5).forEach(post => {
const li = document.createElement('li');
li.innerHTML = `<strong>${post.title}</strong><p>${post.body}</p><hr>`;
list.appendChild(li);
});
});
</script>
Тепер пости з’являються на сторінці! Без перезавантаження.
Швидкий висновок: JSON — це структуровані дані. Метод .json() перетворює відповідь у об’єкт JavaScript, з яким легко працювати.
⸻
POST-запит: як надіслати замовлення на кухню
📤 Тепер навпаки: ми надсилаємо дані на сервер. Наприклад, додаємо новий пост у блог.
🎯 Що потрібно для POST?
- 📝
method: 'POST' — тип запиту - 🏷️
headers — "ярлик на посилці": що всередині? - 📦
body — самі дані
<script>
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'Мій новий пост',
body: 'Привіт, це я пишу через Fetch!',
userId: 1
})
})
.then(response => response.json())
.then(data => console.log('Додано:', data));
</script>
🔄 Сервер (JSONPlaceholder) не збереже це назавжди — але покаже, що "отримав". У консолі побачите новий об’єкт з id: 101.
📝 Приклад з життя: Ви заповнюєте форму на сайті: ім’я, email, повідомлення. Натискаєте "Надіслати". Це POST-запит. Сервер зберігає ваші дані.
💡 Порада експерта: Завжди вказуйте Content-Type: application/json, коли надсилаєте JSON. Інакше сервер не зрозуміє, що це.
✅ Швидкий висновок: POST — це спосіб надіслати дані. Треба вказати метод, заголовки і тіло запиту через JSON.stringify().
⸻
PUT і DELETE: оновлення та видалення даних
PUT — оновлення (як змінити замовлення)
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: 'Оновлений заголовок',
body: 'Це нова версія поста'
})
})
.then(response => response.json())
.then(data => console.log('Оновлено:', data));
</script>
DELETE — видалення (скасувати страву)
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
})
.then(() => console.log('Пост видалено!'));
</script>
Приклад з життя: Ви замовили піцу, але передумали — просите замінити на суші (PUT). Або взагалі скасовуєте замовлення (DELETE).
Мій висновок: PUT і DELETE — це способи змінювати або видаляти дані. Достатньо змінити method і, за потреби, додати body.
⸻
Обробка помилок: що робити, якщо офіціант не прийшов?
Іноді сервер не відповідає. Неправильна адреса, немає інтернету, сервер "впав". Треба бути готовим.
Основні способи обробки помилок
<script>
fetch('https://jsonplaceholder.typicode.com/несуществующий_адрес')
.then(response => {
if (!response.ok) {
throw new Error(`Помилка: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => {
console.log('Щось пішло не так:', error.message);
});
</script>
response.ok — чи статус 200-299?throw new Error — кидаємо помилку.catch() — ловимо всі помилки
Приклад з життя: Ви дзвоните другові. Якщо він не бере трубку — ви залишаєте повідомлення або телефонуєте іншому. Так і тут.
Швидкий висновок: Завжди перевіряйте response.ok і використовуйте .catch(). Це врятує користувача від "білих екранів".
⸻
Практичний приклад: блог з динамічними постами
🧩 Зберемо все докупи: створимо міні-блог, де:
- 📥 Пости завантажуються при відкритті
- ➕ Можна додати новий пост
- 🗑️ Можна видалити пост
</head>
<body>
<h1>Мій блог</h1>
<div id="posts"></div>
<h2>Додати пост</h2>
<input id="title" placeholder="Заголовок"><br><br>
<textarea id="body" placeholder="Текст поста"></textarea><br><br>
<button onclick="addPost()">Опублікувати</button>
<script>
const postsDiv = document.getElementById('posts');
// Завантаження постів
function loadPosts() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(r => r.json())
.then(posts => {
postsDiv.innerHTML = '';
posts.slice(0, 10).forEach(post => renderPost(post));
});
}
// Відображення одного поста
function renderPost(post) {
const div = document.createElement('div');
div.className = 'post';
div.innerHTML = `
<h3>${post.title}</h3>
<p>${post.body}</p>
<button onclick="deletePost(${post.id})">Видалити</button>
`;
postsDiv.appendChild(div);
}
// Додавання поста
function addPost() {
const title = document.getElementById('title').value;
const body = document.getElementById('body').value;
if (!title || !body) return alert('Заповніть поля!');
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title, body, userId: 1 })
})
.then(r => r.json())
.then(newPost => {
renderPost(newPost);
document.getElementById('title').value = '';
document.getElementById('body').value = '';
});
}
// Видалення
function deletePost(id) {
fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, { method: 'DELETE' })
.then(() => loadPosts());
}
// Завантажуємо при старті
loadPosts();
</script>
</body>
</html>
📱 Приклад з життя: Ви користуєтесь Instagram. Пости завантажуються автоматично, коли ви скролите. Ви публікуєте фото — воно з’являється. Ви видаляєте — воно зникає. Усе це — Fetch API під капотом.
✅ Швидкий висновок: З Fetch можна створити повноцінний динамічний додаток: завантаження, додавання, видалення — усе без перезавантаження сторінки.
⸻
Ще більше корисних матеріалів для вашого розвитку
Продовжуємо занурення у світ веб-розробки та SEO. Ось ще чотири статті — кожна з них допоможе вам уникнути типових помилок, зрозуміти основи та писати кращий код:
Як налаштувати Canonical URL та уникнути дублів контенту
— Покроковий гайд: що таке дублі, чому Google їх не любить і як правильно вказати головну сторінку через <link rel="canonical">.
Ранжування: що це таке простими словами + приклади
— Як Google вирішує, хто буде на першому місці? Реальні кейси, фактори ранжування та що ви можете зробити вже сьогодні.
Фреймворки: Чому розробники не пишуть код з нуля (на прикладі Spring)
— Навіщо потрібен Spring? Як він прискорює розробку бекенду в 10 разів? І чому "чистий" Java — це як їхати на велосипеді по автобану.
Фронтенд та Бекенд: Просте пояснення
— Що робить фронтенд, а що — бекенд? Як вони спілкуються? І чому ви не можете стати fullstack без розуміння обох сторін.
Читати по черзі — або стрибати туди, де болить.
❓ Часті питання (FAQ)
🌐 Чи працює Fetch у старих браузерах?
❌ Ні, Fetch API не працює в старих браузерах, таких як Internet Explorer (включно з IE11) або дуже старі версії Chrome і Firefox. Підтримка з’явилася лише з 2015–2017 років:
- ✅ Chrome — з версії 42
- ✅ Firefox — з версії 39
- ✅ Safari — з версії 10.1
- ✅ Edge — з версії 14
📊 Це означає, що понад 95% сучасних користувачів можуть використовувати Fetch без проблем. Але якщо ваш сайт має відвідувачів зі старими браузерами, є два рішення:
- 🛠️ Поліфіл — спеціальний скрипт, який "додає" Fetch у старі браузери. Найпопулярніший — від GitHub. Ви просто підключаєте його на початку сторінки, і Fetch починає працювати скрізь.
- ⚡ XMLHttpRequest — старий, але надійний спосіб. Він працює всюди, але код виглядає складніше і менш зручно.
💡 Порада для новачків: Поки ви вчитеся — використовуйте тільки Fetch. Коли дійдете до реального проєкту — перевірте аудиторію і додайте поліфіл, якщо потрібно.
🔒 Чи безпечний Fetch?
✅ Так, Fetch безпечний — але тільки якщо ви розумієте, як працює CORS (Cross-Origin Resource Sharing). Це система захисту браузера, яка блокує запити до інших сайтів, якщо сервер це не дозволяє.
🌐 Приклад: Ваш сайт на myblog.ua хоче отримати дані з api.weather.com. Браузер дозволить це тільки якщо сервер погоди надішле спеціальний заголовок:
🚫 Якщо заголовка немає — ви побачите помилку в консолі: "CORS policy blocked".
🛡️ Як уникнути проблем з CORS?
- ✅ Використовуйте API, які дозволяють запити з будь-якого сайту — наприклад, JSONPlaceholder, OpenWeatherMap (з API-ключем), або GitHub API.
- ✅ Створіть проксі на своєму сервері: ваш бекенд (наприклад, на Node.js або PHP) робить запит до зовнішнього API і віддає результат фронтенду — без CORS.
- ❌ Ніколи не вимикайте CORS у продакшні — це відкриває двері для атак.
🍪 Також пам’ятайте: Fetch не надсилає куки автоматично. Це добре для безпеки, але якщо потрібна авторизація — додайте опцію credentials: 'include' і використовуйте токени (наприклад, JWT).
🎯 Висновок: Fetch безпечний, якщо ви використовуєте правильні API і не ігноруєте CORS.
⚖️ Чим Fetch кращий за Axios?
Обидва інструменти роблять одне й те ж — надсилають запити. Але є важливі відмінності:
| Критерій | Fetch | Axios |
|---|
| Вбудований? | ✅ Так, є в браузері | 📦 Ні, треба підключати |
| Розмір | 🎯 0 КБ (вже є) | ⚖️ ~13 КБ |
| Автоматичний JSON | ❌ Ні, треба .json() | ✅ Так, автоматично |
| Інтерсептори | 🚫 Немає | 🛠️ Так (додають токени, логи) |
| Для новачків | 🌟 Ідеально | 📚 Зайве |
🎯 Коли вибирати Fetch?
- 📖 Ви тільки вчитеся
- 🛠️ Проєкт простий (GET/POST)
- 🚫 Не хочете зайвих залежностей
🎯 Коли переходити на Axios?
- 🔐 Багато запитів з авторизацією
- 📋 Потрібно додавати заголовки до всіх запитів
- 💼 Робите велике SPA-додаток
💡 Висновок для новачків: Почніть з Fetch — ви зрозумієте, як усе працює "під капотом". Потім, коли відчуєте обмеження — переходьте на Axios. Це як їздити на велосипеді 🚲 перед автомобілем 🚗.
⸻
✅ Висновки
🎯 Підведемо підсумки:
- ⚡ Fetch API — простий і потужний інструмент для роботи з даними без перезавантаження сторінки
- 📨 Основні методи: GET, POST, PUT, DELETE — як "попросити", "надіслати", "оновити" і "видалити" інформацію
- ⚠️ Обробка помилок — обов'язкова, щоб ваш сайт не "зависав" при проблемах із мережею
- 🚀 Рекомендація: Почніть із JSONPlaceholder — безкоштовного API для тестів. Створіть свій міні-блог, додайте, видаліть пости — і ви відчуєте силу Fetch!
💯 Підсумок: Fetch API — це ваш офіціант 🛎️ у світі веб-розробки. Ви "замовляєте" дані — і отримуєте їх миттєво ⚡, без перезавантаження. Освойте його сьогодні — і ваші сайти стануть живими, швидкими та сучасними. Починайте з малого, і вже за годину ⏰ ви створите свій перший динамічний додаток!
💻 Практичний приклад: GET-запит з поясненням по рядках
📝 Ось повний приклад, як отримати 5 постів і вивести їх у консоль. Кожна строчка — з коментарем:
// Надсилаємо запит на сервер за адресою
fetch('https://jsonplaceholder.typicode.com/posts')
// Коли сервер відповість — отримуємо "посилку" (response)
.then(response => response.json())
// Перетворюємо "посилку" в об'єкт JavaScript (JSON → об'єкт)
.then(posts => {
// Беремо тільки перші 5 постів, щоб не перевантажувати
posts.slice(0, 5).forEach(post => {
// Виводимо заголовок кожного поста в консоль
console.log(`Заголовок: ${post.title}`);
});
})
// Якщо щось пішло не так (немає інтернету, неправильна адреса) — ловимо помилку
.catch(error => console.log('Помилка:', error));
