Web API на практике - примеры кода
При изучении принципов функционирования веб-интерфейсов прикладного программирования (Web API) особое внимание следует уделять учебным и минимальным примерам, поскольку их основная цель заключается исключительно в демонстрации базовой механики взаимодействия между клиентом и сервером, а не в формировании готового промышленного решения. Однако при переносе разработанного функционала в условия продуктивной эксплуатации (продакшен) возникает настоятельная необходимость в расширении исходного кода целым комплексом дополнительных сервисных слоев. В первую очередь речь идет о внедрении строгой валидации входящих и исходящих данных, реализации механизмов повторных попыток выполнения запросов при сбоях (ретраев), организации всеобъемлющего логирования событий, а также настройке систем мониторинга состояния работоспособности как самого API, так и сетевого трафика. Помимо этого, важно учитывать, что значительная часть современных интерфейсов API предъявляет повышенные требования к безопасности канала передачи данных, что выражается в обязательном использовании протокола HTTPS для шифрования трафика, а также требует явного получения разрешения со стороны пользователя или администратора системы на выполнение определенных операций, особенно если они связаны с доступом к конфиденциальным данным или изменением критических настроек.
Fetch API - получить JSON с сервера
Fetch API представляет собой современный программный интерфейс для осуществления асинхронных сетевых запросов, который пришел на смену устаревшему объекту XMLHttpRequest. Данный интерфейс основан на механизме промисов (Promise), что позволяет выполнять HTTP-запросы к серверным эндпоинтам и обрабатывать полученные ответы, включая извлечение данных в формате JSON, в удобном и читаемом стиле, обеспечивая при этом гибкое управление заголовками, методами запросов и обработкой ошибок.
async function loadProfile() {
const res = await fetch("/api/profile", {
method: "GET",
headers: { Accept: "application/json" },
});
if (!res.ok) {
throw new Error(`HTTP ${res.status}`);
}
const data = await res.json();
console.log("Профиль:", data);
}
loadProfile().catch(console.error);
Где встречается — личный кабинет, загрузка карточек товара, новостная лента.
DOM + Events - обработать кнопку и обновить интерфейс
DOM (Document Object Model) и Events образуют фундаментальный механизм взаимодействия пользователя с веб-страницей. DOM представляет собой объектную модель документа, предоставляющую структурированное представление HTML-разметки в виде дерева узлов, к которым можно программно обращаться и модифицировать их содержимое и атрибуты. Событийная модель (Events) дополняет эту картину, позволяя реагировать на различные действия пользователя, такие как клики мышью, нажатия клавиш или отправку форм, и в ответ на эти действия динамически обновлять интерфейс, изменяя свойства элементов DOM без необходимости полной перезагрузки страницы.
<button id="incBtn">+1</button>
<p id="counter">0</p>
const btn = document.getElementById("incBtn");
const counter = document.getElementById("counter");
let value = 0;
btn.addEventListener("click", () => {
value += 1;
counter.textContent = String(value);
});
Где встречается — формы, фильтры, модалки, переключатели темы.
localStorage - сохранить настройку темы
localStorage является механизмом клиентского хранения данных, предоставляющим возможность сохранять пары ключ-значение в виде строк в постоянной памяти браузера пользователя. В отличие от сессионных хранилищ, данные, помещенные в localStorage, сохраняются даже после закрытия и повторного открытия браузера, что делает данный интерфейс идеальным инструментом для сохранения пользовательских настроек, таких как выбранная цветовая тема оформления или предпочтительный язык интерфейса, обеспечивая их автоматическое восстановление при последующих посещениях сайта.
const themeKey = "ui-theme";
function applyTheme(theme) {
document.documentElement.dataset.theme = theme;
}
const saved = localStorage.getItem(themeKey) || "light";
applyTheme(saved);
document.getElementById("toggleTheme").addEventListener("click", () => {
const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
localStorage.setItem(themeKey, next);
applyTheme(next);
});
Где встречается — тема, язык, плотность интерфейса, локальные предпочтения.
URLSearchParams - читать параметры из URL
URLSearchParams представляет собой вспомогательный интерфейс, предназначенный для удобного парсинга и манипуляции строкой запроса (query string) URL-адреса. Данный объект предоставляет методы для извлечения значений параметров по их именам, добавления новых параметров, удаления существующих и итерации по всем переданным в строке запроса данным, что существенно упрощает чтение параметров, переданных в адресной строке браузера при переходе по ссылкам или после отправки форм методом GET.
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
const category = params.get("category") || "all";
const page = Number(params.get("page") || "1");
console.log({ category, page });
Где встречается: фильтры и пагинация в каталогах.
History API - менять URL без перезагрузки
History API является интерфейсом навигации, позволяющим программно управлять историей сессий браузера. В отличие от традиционной навигации, которая сопровождается полной перезагрузкой страницы, данный интерфейс позволяет изменять текущий URL-адрес в адресной строке и манипулировать записями в стеке истории посещений без фактической перезагрузки содержимого документа. Это открывает возможности для создания одностраничных приложений, где смена URL служит индикатором состояния приложения, а содержимое обновляется асинхронно посредством динамических запросов.
function setPage(page) {
const url = new URL(window.location.href);
url.searchParams.set("page", String(page));
history.pushState({ page }, "", url);
}
window.addEventListener("popstate", (e) => {
console.log("Назад/вперёд:", e.state);
});
Где встречается: SPA и любые "живые" интерфейсы с маршрутизацией.
Clipboard API - копировать ссылку
Clipboard API обеспечивает безопасный и стандартизированный доступ к системному буферу обмена, позволяя веб-приложениям как считывать текстовые и даже графические данные из буфера, так и записывать в него произвольное содержимое. Данный интерфейс используется для реализации функциональности копирования и вставки, например, при необходимости скопировать ссылку на текущую страницу или выделенный фрагмент текста, при этом для обеспечения безопасности пользователя доступ к буферу обмена требует явного разрешения и обычно инициируется непосредственными действиями пользователя.
async function copyCurrentLink() {
await navigator.clipboard.writeText(window.location.href);
console.log("Ссылка скопирована");
}
Где встречается: "Поделиться", "Скопировать приглашение".
WebSocket - получать сообщения в реальном времени
WebSocket является протоколом и соответствующим программным интерфейсом, обеспечивающим постоянное двунаправленное соединение между клиентским браузером и сервером. В отличие от традиционных HTTP-запросов, которые предполагают инициацию связи только со стороны клиента, WebSocket-соединение остается открытым и позволяет серверу самостоятельно отправлять данные клиенту в любой момент времени, что делает этот интерфейс незаменимым для создания приложений реального времени, таких как чаты, онлайн-игры или биржевые торговые платформы.
const ws = new WebSocket("wss://example.com/chat");
ws.addEventListener("open", () => {
ws.send(JSON.stringify({ type: "join", room: "general" }));
});
ws.addEventListener("message", (event) => {
const payload = JSON.parse(event.data);
console.log("Новое сообщение:", payload);
});
ws.addEventListener("close", () => {
console.log("Соединение закрыто");
});
Где встречается — чаты, статусы заказов, live-обновления.
Server-Sent Events - поток событий от сервера
Server-Sent Events (SSE) представляет собой технологию, позволяющую серверу отправлять клиенту поток событий через долгоживущее HTTP-соединение, при этом связь остается однонаправленной — данные передаются только от сервера к клиенту. Данный интерфейс основан на стандартном протоколе HTTP и значительно проще в реализации по сравнению с WebSocket, что делает его оптимальным выбором для сценариев, требующих регулярного получения обновлений от сервера, например, для ленты новостей, биржевых котировок или систем мониторинга, где клиенту достаточно лишь подписаться на поток событий.
const source = new EventSource("/api/events");
source.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log("Событие:", data);
};
source.onerror = () => {
console.log("Проблема с SSE-каналом");
};
Где встречается — мониторинг, live-лог, новостные тики.
File API - прочитать локальный файл
File API предоставляет веб-приложениям возможность взаимодействовать с локальными файлами, хранящимися на компьютере пользователя. С помощью данного интерфейса можно получать доступ к содержимому файлов, выбранных через элемент ввода формы или полученных в результате операций перетаскивания (drag-and-drop), осуществлять чтение их содержимого как в текстовом, так и в бинарном виде, а также получать информацию о файлах, такую как их название, размер и MIME-тип, без необходимости отправки файлов на сервер.
<input id="fileInput" type="file" />
document.getElementById("fileInput").addEventListener("change", (e) => {
const file = e.target.files?.[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
console.log("Первые символы:", String(reader.result).slice(0, 80));
};
reader.readAsText(file, "utf-8");
});
Где встречается — загрузка CSV, импорт настроек, предпросмотр документов.
Canvas API - нарисовать фигуру
Canvas API является инструментом для программного рисования двухмерной графики непосредственно в браузере с использованием языка JavaScript. Данный интерфейс предоставляет контекст рисования, представляющий собой растровое полотно, на которое методами библиотеки можно наносить геометрические фигуры, линии, текст, градиенты и даже отдельные пиксели, что делает Canvas незаменимым средством для создания игр, графических редакторов, визуализации данных и сложных анимированных интерфейсов.
<canvas id="demoCanvas" width="240" height="120"></canvas>
const canvas = document.getElementById("demoCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#0ea5e9";
ctx.fillRect(10, 10, 100, 60);
ctx.beginPath();
ctx.arc(170, 40, 25, 0, Math.PI * 2);
ctx.fillStyle = "#22c55e";
ctx.fill();
Где встречается — графики, редакторы, игры, карты. Пошаговые учебные скетчи (квадрат, цветок, снежинка, анимация) с разбором строк — Примеры фигур на Processing/p5.js (Canvas) и SVG — рисунки кодом (вектор в HTML); теория API — Canvas 2D.
Web Worker - вынести тяжёлый расчёт из UI-потока
Web Worker представляет собой механизм многопоточности в браузере, позволяющий выполнять ресурсоемкие вычисления в фоновом потоке, полностью изолированном от основного интерфейсного потока (UI-потока). Данный интерфейс используется для предотвращения зависания и замедления работы пользовательского интерфейса, которое неизбежно возникает при выполнении сложных математических расчетов, обработке больших массивов данных или выполнении интенсивных операций в основном потоке, тем самым обеспечивая плавную и отзывчивую работу веб-приложения.
worker.js:
self.onmessage = (e) => {
const n = e.data;
let sum = 0;
for (let i = 0; i < n; i += 1) sum += i;
self.postMessage(sum);
};
main.js:
const worker = new Worker("/worker.js");
worker.onmessage = (e) => {
console.log("Результат:", e.data);
};
worker.postMessage(20_000_000);
Где встречается — аналитические панели, обработка больших таблиц, редакторы.
Notifications API - показать уведомление
Notifications API предоставляет механизм для отображения системных уведомлений, которые появляются за пределами окна браузера на рабочем столе или в центре уведомлений операционной системы. Данный интерфейс позволяет веб-приложениям оповещать пользователя о важных событиях, даже если страница свернута или находится на заднем плане, однако для его использования требуется явное разрешение пользователя, что гарантирует защиту от назойливых и нежелательных уведомлений.
async function notify() {
const permission = await Notification.requestPermission();
if (permission !== "granted") return;
new Notification("Готово", {
body: "Ваш отчёт сформирован.",
});
}
Где встречается — напоминания, завершение долгих операций, пуши (в связке с Service Worker).
Broadcast Channel - связь между вкладками
Broadcast Channel API является средством межвкладочной коммуникации, позволяющей различным контекстам браузера, таким как вкладки, окна или фреймы, принадлежащие одному и тому же источнику, обмениваться текстовыми сообщениями. Данный интерфейс упрощает координацию действий между независимыми частями одного приложения, открытыми в разных вкладках, что может использоваться для синхронизации состояния, обмена маркерами аутентификации или координированного выполнения задач в распределенной среде клиента.
const channel = new BroadcastChannel("auth-state");
channel.onmessage = (event) => {
if (event.data?.type === "logout") {
console.log("Выход из аккаунта в другой вкладке");
}
};
function logoutEverywhere() {
channel.postMessage({ type: "logout" });
}
Где встречается: синхронизация входа/выхода и настроек в нескольких вкладках.
Performance API - измерить время операции
Performance API является специализированным интерфейсом, предназначенным для высокоточного измерения временных характеристик выполнения различных операций в веб-приложении. Данный инструмент предоставляет разработчикам возможность фиксировать метки времени на разных этапах выполнения кода, измерять продолжительность работы функций, анализировать загрузку ресурсов и получать детальную информацию о производительности, что крайне необходимо для оптимизации и выявления узких мест в работе сложных веб-приложений.
performance.mark("start-render");
// ... логика рендера
performance.mark("end-render");
performance.measure("render-time", "start-render", "end-render");
const [measure] = performance.getEntriesByName("render-time");
console.log(`Render: ${measure.duration.toFixed(2)} ms`);
Где встречается: оптимизация производительности UI и загрузки.
Web Crypto API - посчитать SHA-256
Web Crypto API предоставляет криптографические функции для выполнения безопасных операций непосредственно в браузере. Данный интерфейс включает в себя возможность генерации криптостойких ключей, выполнения хеширования данных с использованием алгоритмов, таких как SHA-256, осуществления шифрования и дешифрования информации, а также создания цифровых подписей. Важно отметить, что данный интерфейс работает с низкоуровневыми криптографическими примитивами, что делает его более безопасным по сравнению с самописными реализациями, и широко применяется в задачах, связанных с обеспечением безопасности и подтверждением целостности данных.
async function sha256(text) {
const data = new TextEncoder().encode(text);
const hashBuffer = await crypto.subtle.digest("SHA-256", data);
const hashArray = Array.from(new Uint8Array(hashBuffer));
return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
}
sha256("web api").then(console.log);
Где встречается — проверка целостности, подписи, безопасные токены.
Мини-чеклист перед использованием Web API
- Проверяйте поддержку API в целевых браузерах.
- Проверяйте разрешения (
Notification, камера, микрофон, буфер обмена). - Учитывайте требования
HTTPS. - Для сетевых вызовов обрабатывайте ошибки и таймауты.
- Для тяжёлых задач используйте
Web Worker.