Пошук уроків, статей та іншого контенту
Виконаєте перші асинхронні запити через fetch і отримаєте дані з API у JavaScript.
fetchfetch — це вбудований у JavaScript API для виконання мережевих запитів. За його допомогою можна отримувати дані із сервера або надсилати на сервер інформацію.
Найпростіший запит має такий вигляд:
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((data) => {
console.log(data);
});У результаті в консолі буде об’єкт:
{
userId: 1,
id: 1,
title: "delectus aut autem",
completed: false
}fetch працює асинхронно. Це означає, що JavaScript не зупиняє виконання всієї програми, поки чекає на відповідь сервера.
Розглянемо основні кроки:
fetch надсилає запит за вказаною адресою.
Сервер повертає об’єкт Response.
Метод response.json() читає тіло відповіді та перетворює JSON на JavaScript-об’єкт.
Отримані дані можна використати в програмі.
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((todo) => {
console.log(todo.title);
});Метод response.json() також є асинхронним і повертає Promise. Тому результат його виконання обробляється наступним .then().
.then()fetch повертає Promise — об’єкт, який представляє майбутній результат асинхронної операції.
Для обробки успішного результату використовують .then():
fetch("https://jsonplaceholder.typicode.com/users/1")
.then((response) => {
return response.json();
})
.then((user) => {
console.log(user.name);
console.log(user.email);
});Той самий код можна записати коротше:
fetch("https://jsonplaceholder.typicode.com/users/1")
.then((response) => response.json())
.then((user) => {
console.log(user.name);
console.log(user.email);
});Перший .then() отримує відповідь сервера, а другий — уже перетворені дані.
Важливо перевіряти, чи сервер відповів успішно. Для цього використовують властивість response.ok.
Вона має значення true, якщо HTTP-статус відповіді перебуває в діапазоні від 200 до 299.
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => {
if (!response.ok) {
throw new Error(`Помилка HTTP: ${response.status}`);
}
return response.json();
})
.then((todo) => {
console.log(todo);
})
.catch((error) => {
console.error("Не вдалося отримати дані:", error.message);
});Метод .catch() обробляє помилки:
проблеми з мережею;
помилки, створені через throw;
інші помилки в ланцюжку Promise.
async та awaitСучасний і зручний спосіб роботи з fetch — синтаксис async/await.
Ключове слово await призупиняє виконання конкретної async-функції, поки Promise не буде виконано. Водночас воно не блокує всю програму.
async function getTodo() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/todos/1"
);
if (!response.ok) {
throw new Error(`Помилка HTTP: ${response.status}`);
}
const todo = await response.json();
console.log(todo);
}
getTodo();Функція, у якій використовується await, повинна бути оголошена з ключовим словом async.
try...catchДля обробки помилок разом з async/await використовують конструкцію try...catch.
async function getTodo() {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/todos/1"
);
if (!response.ok) {
throw new Error(`Помилка HTTP: ${response.status}`);
}
const todo = await response.json();
console.log("Назва завдання:", todo.title);
console.log("Виконано:", todo.completed);
} catch (error) {
console.error("Сталася помилка:", error.message);
}
}
getTodo();Якщо під час виконання запиту або обробки відповіді виникне помилка, програма перейде до блоку catch.
Створімо невелику сторінку, яка отримує завдання з API та показує його користувачу.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<title>Завдання з API</title>
</head>
<body>
<h1>Завдання</h1>
<button id="load-button">Завантажити завдання</button>
<p id="status"></p>
<article id="todo"></article>
<script>
const loadButton = document.querySelector("#load-button");
const statusElement = document.querySelector("#status");
const todoElement = document.querySelector("#todo");
async function loadTodo() {
statusElement.textContent = "Завантаження...";
todoElement.textContent = "";
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/todos/1"
);
if (!response.ok) {
throw new Error(`Помилка HTTP: ${response.status}`);
}
const todo = await response.json();
todoElement.innerHTML = `
<h2>${todo.title}</h2>
<p>Користувач: ${todo.userId}</p>
<p>Статус: ${todo.completed ? "Виконано" : "Не виконано"}</p>
`;
statusElement.textContent = "";
} catch (error) {
statusElement.textContent =
"Не вдалося завантажити дані. Спробуйте ще раз.";
console.error("Помилка запиту:", error);
}
}
loadButton.addEventListener("click", loadTodo);
</script>
</body>
</html>У цьому прикладі:
кнопка запускає функцію loadTodo;
перед запитом показується повідомлення про завантаження;
fetch отримує дані;
JSON перетворюється на об’єкт;
дані додаються до сторінки;
помилки показуються користувачу.
API може повертати не один об’єкт, а масив об’єктів.
async function getTodos() {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/todos?_limit=5"
);
if (!response.ok) {
throw new Error(`Помилка HTTP: ${response.status}`);
}
const todos = await response.json();
todos.forEach((todo) => {
console.log(todo.title);
});
} catch (error) {
console.error("Не вдалося завантажити список:", error.message);
}
}
getTodos();Після response.json() змінна todos містить масив, тому для його обробки можна використати forEach, map або інші методи масивів.
ResponseОб’єкт, який повертає fetch, має корисні властивості:
async function inspectResponse() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/todos/1"
);
console.log(response.status); // HTTP-статус, наприклад 200
console.log(response.ok); // true або false
console.log(response.headers); // заголовки відповіді
const data = await response.json();
console.log(data);
}
inspectResponse();Найчастіше використовують:
response.ok — чи успішна відповідь;
response.status — числовий HTTP-статус;
response.json() — отримання даних у форматі JSON;
response.text() — отримання відповіді як тексту.
Методи читання тіла відповіді, наприклад json() і text(), потрібно викликати асинхронно.
Параметри можна додавати до URL після знака ?.
async function getUserTodos(userId) {
const url = `https://jsonplaceholder.typicode.com/todos?userId=${userId}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Помилка HTTP: ${response.status}`);
}
const todos = await response.json();
console.log(todos);
}
getUserTodos(1);У цьому прикладі API отримає параметр userId=1 і поверне завдання відповідного користувача.
fetchДля більшості запитів можна використовувати такий алгоритм:
Створити async-функцію.
Виконати fetch з await.
Перевірити response.ok.
Отримати дані через response.json().
Використати отримані дані.
Обробити помилки через try...catch.
async function loadData() {
try {
const response = await fetch("https://example.com/api/data");
if (!response.ok) {
throw new Error(`Статус відповіді: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error.message);
}
}await перед response.json()Неправильно:
const data = response.json();
console.log(data);У такому випадку data буде Promise, а не готовими даними.
Правильно:
const data = await response.json();
console.log(data);fetch не вважає HTTP-помилки на кшталт 404 або 500 винятком автоматично. Тому потрібно самостійно перевіряти response.ok.
if (!response.ok) {
throw new Error(`Помилка HTTP: ${response.status}`);
}await поза async-функцієюНеправильно:
const response = await fetch("https://example.com/api/data");У звичайному навчальному коді await потрібно використовувати всередині async-функції:
async function loadData() {
const response = await fetch("https://example.com/api/data");
}Якщо не обробляти помилки, користувач може не зрозуміти, чому дані не з’явилися.
Використовуйте try...catch:
try {
// Код запиту
} catch (error) {
console.error(error);
}Якщо сервер повертає JSON, використовуйте response.json(). Якщо сервер повертає звичайний текст, використовуйте response.text().
const response = await fetch("https://example.com/message.txt");
const message = await response.text();
console.log(message);Створіть сторінку, яка:
Містить кнопку «Завантажити користувача».
Після натискання виконує запит до:
https://jsonplaceholder.typicode.com/users/1
Показує ім’я, електронну пошту та телефон користувача.
Показує повідомлення про помилку, якщо запит не вдався.
Поки виконується запит, показує текст «Завантаження...».
Для отримання даних використайте async/await, try...catch і перевірку response.ok.
fetch використовується для асинхронних HTTP-запитів.
Результатом fetch є Promise з об’єктом Response.
Метод response.json() перетворює JSON-відповідь на JavaScript-дані.
Для зручної роботи із запитами можна використовувати async/await.
Відповідь потрібно перевіряти через response.ok.
Помилки обробляють за допомогою .catch() або try...catch.
Отримані дані можна виводити в консоль або додавати до HTML-сторінки.