Что такое API простыми словами: объясняем на примере сайта

API — это набор правил, по которым одна программа может использовать возможности другой. Например, сайту погоды не нужно самому измерять температуру во всех городах. Он отправляет запрос метеорологическому сервису, получает готовые данные и показывает их пользователю. Названия нужных параметров, адреса для запросов и формат ответов описаны в API этого сервиса.

Как API связывает сайт и сервис

Представьте страницу, которая показывает текущую погоду в Москве. На ней есть заголовок, температура и скорость ветра. Но данные хранятся на сервере метеорологического сервиса. Чтобы их получить, странице нужен программный интерфейс, то есть API.

Сайт отправляет запрос на определенный адрес и указывает, какие сведения нужны. Сервер проверяет параметры, находит данные и возвращает ответ. Затем код страницы извлекает температуру из ответа и подставляет ее в интерфейс.

В этой цепочке участвуют несколько терминов.

• Endpoint — конкретный адрес операции, например получения прогноза погоды.
• Параметры уточняют запрос. Это могут быть координаты города, единицы измерения и часовой пояс.
• GET — HTTP-метод, который используют для получения данных.
• JSON — текстовый формат, в котором сервер часто возвращает структурированный ответ.

API не обязательно связан с интернетом. У браузера, операционной системы и библиотеки тоже есть API. Но в этой статье мы рассмотрим веб-API, к которому сайт обращается по сети.

Делаем запрос к сервису погоды

Для учебного некоммерческого примера возьмем бесплатный API Open-Meteo. Он позволяет запросить прогноз без регистрации и ключа. Даже если вы пока не пишете код, откройте готовый запрос погоды для Москвы и найдите температуру в ответе. Полный адрес запроса можно скопировать из адресной строки открывшейся вкладки.

Браузер выполнит GET-запрос, а сервер вернет JSON. В ответе будут координаты использованной ячейки прогнозной модели, часовой пояс и блоки current и current_units. Нас интересуют текущая температура и единица измерения.

{
  "timezone": "Europe/Moscow",
  "current_units": {
    "temperature_2m": "°C",
    "wind_speed_10m": "km/h"
  },
  "current": {
    "time": "2026-11-03T20:00",
    "temperature_2m": 1.6,
    "wind_speed_10m": 6.5
  }
}

Это сокращенный ответ нашей проверки 3 ноября 2026 года; часть полей опущена. Данные предоставлены Open-Meteo по лицензии CC BY 4.0. При повторном запросе время и числа изменятся. Координаты в полном ответе тоже могут немного отличаться от переданных: сервис сообщает центр ячейки модели, для которой рассчитан прогноз.

Разберем адрес. Часть /v1/forecast — endpoint получения прогноза. После знака ? идут параметры, а & разделяет их. Параметр current перечисляет нужные показатели, latitude и longitude задают координаты, timezone — часовой пояс.

Как показать ответ API на странице

Для этого шага понадобятся основы HTML и JavaScript. Создайте пустую папку и 2 текстовых файла в ней: index.html и weather.js. В первый вставьте разметку ниже. Затем добавьте следующий блок кода в weather.js и откройте index.html в браузере с доступом к интернету.

<!doctype html>
<html lang="ru">
<meta charset="UTF-8">
<title>Погода через API</title>
<p id="weather">Загружаем погоду...</p>
<p>Данные: <a href="https://open-meteo.com/">Open-Meteo</a>,
<a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
Показана только температура.</p>
<script src="weather.js"></script>
</html>

Скрипт подключен после абзаца, поэтому элемент #weather уже существует к моменту запуска. Функция fetch отправит запрос, response.json() преобразует JSON в объект JavaScript, а textContent вставит результат в абзац.

const url = new URL("https://api.open-meteo.com/v1/forecast");
url.search = new URLSearchParams({
  latitude: "55.7558",
  longitude: "37.6173",
  current: "temperature_2m,wind_speed_10m",
  timezone: "Europe/Moscow",
});

async function showWeather(element) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Ошибка HTTP: ${response.status}`);
    }
    const data = await response.json();
    if (typeof data.current?.temperature_2m !== "number" ||
        typeof data.current_units?.temperature_2m !== "string") {
      throw new Error("В ответе нет температуры или единицы измерения");
    }
    element.textContent =
      `${data.current.temperature_2m} ${data.current_units.temperature_2m}`;
  } catch (error) {
    element.textContent = "Не удалось получить погоду. Попробуйте позже.";
    console.error(error);
  }
}

showWeather(document.querySelector("#weather"));

Объект URLSearchParams сам правильно кодирует параметры адреса. Проверка response.ok нужна потому, что fetch может получить ответ с ошибкой HTTP и все равно продолжить выполнение. Блок catch обрабатывает сетевой сбой и наши выброшенные ошибки, а пользователь видит понятное сообщение вместо пустого блока.

Мы выполнили этот запрос и проверили обработку неверной координаты. В первом случае код вывел температуру, во втором сервер ответил HTTP 400, и сработало сообщение об ошибке. Проверка полей защищает от вывода undefined, если ответ неполный. На странице рядом с результатом оставлена ссылка на источник данных. Перед использованием API в коммерческом проекте прочитайте условия Open-Meteo: бесплатный доступ ограничен некоммерческими задачами.

Что такое API-ключ и REST API

Некоторые сервисы просят добавить к запросу API-ключ. Это строка, которая помогает сервису распознать приложение, учитывать использование и применять ограничения. Ключ не нужен каждому API, как показывает наш пример с Open-Meteo.

Секретный ключ нельзя вставлять в браузерный JavaScript, публиковать в репозитории или показывать на скриншоте. Любой, кто его получит, сможет отправлять запросы в рамках выданных прав. Обычно такой ключ хранят на сервере, а сайт обращается к серверному посреднику. Открытый публичный ключ с ограниченными правами — отдельный случай, условия смотрят в документации конкретного сервиса.

В документации вы также встретите название REST API. REST — подход к устройству взаимодействия программ с набором правил, например об отдельных адресах ресурсов и независимости запросов. В разговоре разработчики часто называют REST API почти любой HTTP API с методами вроде GET и ответами JSON. Однако одного GET и формата JSON недостаточно, чтобы API соответствовал всем правилам REST.

Какие ошибки встречаются у новичков

Первая ошибка — перепутать задачи API, HTTP и JSON. API описывает возможности сервиса, GET задает тип HTTP-запроса, а JSON определяет формат данных. Вторая ошибка — искать готовую HTML-страницу в ответе API. Чаще сервис возвращает данные, а разметкой занимается код сайта.

Также важно проверять структуру ответа по документации. В нашем примере температура находится по пути data.current.temperature_2m, а единица измерения — в соседнем блоке current_units. Если сервис изменит ответ или параметр окажется неверным, код должен показать ошибку, а не молча оставить старое значение.

Для следующей практики выберите другой учебный сервис из нашей подборки API для frontend-разработчика или добавьте погодный блок в один из пет-проектов для новичка.

В примере с погодой вы связали данные сервиса с элементом страницы с помощью JavaScript. Чтобы потренироваться создавать интерфейс и добавлять к нему логику под руководством преподавателя, попробуйте бесплатный интенсив Frontend: Start. За 7 дней по записанным урокам вы пройдете создание сервиса доставки: сверстаете страницы, добавите функционал на JavaScript, познакомитесь с Angular, а затем с серверной частью и размещением проекта на хостинге. Это поможет увидеть, как разметка, логика страницы и серверная часть объединяются в одном проекте. Если хотите последовательно освоить frontend и поработать с API в более крупных проектах, посмотрите курс Frontend-разработчик.