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 и станете на шаг ближе к профессиональной разработке.