Перейти к основному содержимому

Web API на практике - примеры кода

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Всем

Как читать примеры​

  • Примеры минимальные: цель - понять механику API.
  • Для продакшена добавляйте валидацию, ретраи, логирование и мониторинг.
  • Часть API требует HTTPS и/или явного разрешения пользователя.

1) Fetch API - получить 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);

Где встречается: личный кабинет, загрузка карточек товара, новостная лента.

2) DOM + Events - обработать кнопку и обновить интерфейс​

<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);
});

Где встречается: формы, фильтры, модалки, переключатели темы.

3) 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);
});

Где встречается: тема, язык, плотность интерфейса, локальные предпочтения.

4) URLSearchParams - читать параметры из URL​

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 });

Где встречается: фильтры и пагинация в каталогах.

5) History API - менять 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 и любые "живые" интерфейсы с маршрутизацией.

6) Clipboard API - копировать ссылку​

async function copyCurrentLink() {
  await navigator.clipboard.writeText(window.location.href);
  console.log("Ссылка скопирована");
}

Где встречается: "Поделиться", "Скопировать приглашение".

7) 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-обновления.

8) Server-Sent Events - поток событий от сервера​

const source = new EventSource("/api/events");

source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Событие:", data);
};

source.onerror = () => {
  console.log("Проблема с SSE-каналом");
};

Где встречается: мониторинг, live-лог, новостные тики.

9) File API - прочитать локальный файл​

<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, импорт настроек, предпросмотр документов.

10) Canvas API - нарисовать фигуру​

<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();

Где встречается: графики, редакторы, игры, карты.

11) 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);

Где встречается: аналитические панели, обработка больших таблиц, редакторы.

12) Notifications API - показать уведомление​

async function notify() {
  const permission = await Notification.requestPermission();
  if (permission !== "granted") return;

  new Notification("Готово", {
    body: "Ваш отчёт сформирован.",
  });
}

Где встречается: напоминания, завершение долгих операций, пуши (в связке с Service Worker).

13) Broadcast Channel - связь между вкладками​

const channel = new BroadcastChannel("auth-state");

channel.onmessage = (event) => {
  if (event.data?.type === "logout") {
    console.log("Выход из аккаунта в другой вкладке");
  }
};

function logoutEverywhere() {
  channel.postMessage({ type: "logout" });
}

Где встречается: синхронизация входа/выхода и настроек в нескольких вкладках.

14) 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 и загрузки.

15) 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.

См. также​

См. также

Другие статьи этого же раздела в боковом меню (как на странице "О разделе").

Ещё 7 статей в разделе

Освоение главы0%