5 реальних завдань для практики роботи з API JavaScript

Навіщо вчитися працювати з API

API (Application Programming Interface) дозволяють вашому застосунку взаємодіяти з іншими сервісами: отримувати дані, надсилати форми, публікувати контент і багато іншого. Це невід’ємна частина фронтенд-розробки, особливо під час створення сучасних SPA-застосунків і роботи з зовнішніми платформами. Вміння надсилати запити, обробляти відповіді та реагувати на помилки робить розробника по-справжньому ефективним.

Що потрібно знати перед виконанням завдань

Для виконання завдань бажано розуміти основи JavaScript, синтаксис fetch-запитів, проміси та async/await. Також важливо знати, як працювати з JSON і DOM. Базовий шаблон запиту з використанням fetch виглядає так:

fetch('https://api.example.com/data')
	.then(response => response.json())
	.then(data => {
		console.log(data);
	})
	.catch(error => {
		console.error('Ошибка:', error);
	});

Завдання 1: Отримати список користувачів і відобразити їх на сторінці

Використовуйте публічний API https://jsonplaceholder.typicode.com/users, щоб завантажити список користувачів і вивести їх імена та email на сторінку.

async function loadUsers() {
	const response = await fetch('https://jsonplaceholder.typicode.com/users');
	const users = await response.json();

	const container = document.getElementById('users');
	users.forEach(user => {
		const div = document.createElement('div');
		div.textContent = `${user.name} (${user.email})`;
		container.appendChild(div);
	});
}

loadUsers();

Завдання 2: Надсилання форми з POST-запитом

Створіть просту HTML-форму з полем введення імені. Після натискання на кнопку, надішліть ім’я на https://jsonplaceholder.typicode.com/posts методом POST, а потім виведіть повідомлення про успішну відправку.

document.querySelector('form').addEventListener('submit', async function(event) {
	event.preventDefault();
	const name = document.querySelector('input').value;

	const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify({ name })
	});

	const result = await response.json();
	alert('Дані надіслані. ID запису: ' + result.id);
});

Завдання 3: Пошук інформації за введеним ID

Зробіть поле введення, куди користувач вводить ID поста (від 1 до 100), і кнопку для пошуку. Після натискання на кнопку виконайте GET-запит до https://jsonplaceholder.typicode.com/posts/ID і відобразіть заголовок і текст поста.

async function findPost() {
	const postId = document.getElementById('postId').value;
	const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
	const post = await response.json();

	const output = document.getElementById('postOutput');
	output.innerHTML = `
${post.title}
${post.body}
`;
}

Завдання 4: Обробка помилки при неправильному запиті

Повторіть завдання 3, але додайте обробку помилки, якщо користувач ввів неіснуючий ID (наприклад, більше 100). Відобразіть повідомлення: "Пост не знайдено".

async function safeFindPost() {
	const postId = document.getElementById('postId').value;
	const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);

	if (!response.ok) {
		document.getElementById('postOutput').textContent = 'Пост не знайдено';
		return;
	}

	const post = await response.json();
	document.getElementById('postOutput').innerHTML = `
${post.title}
${post.body}
`;
}

Завдання 5: Пагінація даних

Отримайте список постів і відображайте лише по 5 за раз. Додайте кнопки "Наступна сторінка" і "Попередня сторінка". Використовуйте параметри запиту _page і _limit в API https://jsonplaceholder.typicode.com/posts?_page=1&_limit=5.

let currentPage = 1;

async function loadPage(page) {
	const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=5`);
	const posts = await response.json();

	const container = document.getElementById('posts');
	container.innerHTML = '';
	posts.forEach(post => {
		const div = document.createElement('div');
		div.innerHTML = `
${post.title}
${post.body}
`;
		container.appendChild(div);
	});
}

document.getElementById('next').addEventListener('click', () => {
	currentPage++;
	loadPage(currentPage);
});

document.getElementById('prev').addEventListener('click', () => {
	if (currentPage > 1) {
		currentPage--;
		loadPage(currentPage);
	}
});

loadPage(currentPage);

Висновок

Практика роботи з API — це не лише виклик функцій і робота з JSON. Це розуміння структури даних, грамотна обробка помилок, взаємодія з користувачем і архітектура взаємодії клієнта з сервером. Виконавши запропоновані завдання, ви навчитеся впевнено використовувати API в JavaScript і станете на крок ближче до професійної розробки.