Всё, что нужно знать о работе с API в JavaScript: пошаговый разбор

14 января 2025

Работа с API — это основа веб-разработки. Если вы хотите получать данные с сервера, отправлять информацию или взаимодействовать с внешними сервисами (например, картами Google, платёжными системами или погодными сервисами), вам не обойтись без этого навыка. Разберём работу с API на практике: от базовых запросов до обработки ошибок и аутентификации.

Что такое API и зачем оно нужно

API (Application Programming Interface) — это интерфейс взаимодействия между различными приложениями. Например, ваш фронтенд запрашивает данные о погоде у внешнего сервера через API, получает их в виде JSON и отображает пользователю.

Пример данных из API в формате JSON:

{
  "city": "Москва",
  "temperature": 3,
  "description": "Пасмурно"
}

Работа с API происходит через HTTP-запросы:

GET — для получения данных.
POST — для отправки данных.
PUT — для обновления данных.
DELETE — для удаления данных.

В чём разница между методами GET и POST.

Как отправить базовый GET-запрос с помощью Fetch API

Fetch API — это встроенный метод JavaScript для работы с HTTP-запросами.

Пример простого GET-запроса:

fetch('https://api.example.com/weather?city=Москва')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Код: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Данные из API:', data);
  })
  .catch(error => {
    console.error('Ошибка при выполнении запроса:', error);
  });

Ключевые моменты в этом примере:

response.ok проверяет успешность запроса. Если сервер вернёт статус 404 или 500, код зайдёт в ветку catch.
response.json() преобразует ответ сервера из JSON в объект JavaScript.
.catch обрабатывает любые ошибки, включая сетевые сбои.

Возможные статусы HTTP-ответов:

200 OK — запрос успешен.
201 Created — данные созданы (чаще для POST).
400 Bad Request — ошибка на стороне клиента (например, неверный формат данных).
401 Unauthorized — требуется авторизация.
404 Not Found — ресурс не найден.
500 Internal Server Error — ошибка на стороне сервера.

Асинхронный подход с использованием async/await

Чтобы код был читабельным, используйте async/await. Это убирает вложенность, упрощает обработку данных и ошибок.

async function fetchWeather(city) {
  try {
    const response = await fetch(`https://api.example.com/weather?city=${city}`);
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Код: ${response.status}`);
    }
    const data = await response.json();
    console.log('Данные:', data);
  } catch (error) {
    console.error('Произошла ошибка:', error);
  }
}

fetchWeather('Москва');

Здесь:

async указывает, что функция возвращает промис.
await ждёт завершения промиса (например, завершения запроса или преобразования данных).

Как отправить данные с помощью POST-запроса

POST-запросы используются для отправки данных на сервер, например, при регистрации пользователя.

async function registerUser(userData) {
  try {
    const response = await fetch('https://api.example.com/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userData)
    });
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Код: ${response.status}`);
    }
    const result = await response.json();
    console.log('Ответ сервера:', result);
  } catch (error) {
    console.error('Ошибка при регистрации пользователя:', error);
  }
}

registerUser({
  username: 'new_user',
  email: 'user@example.com',
  password: 'password123'
});

Что здесь важно:

headers указывают, что данные отправляются в формате JSON.
body содержит данные в виде строки (метод JSON.stringify).
Сервер может ответить статусами вроде 201 Created (успех) или 400 Bad Request (ошибка ввода).

Обработка тайм-аута и сетевых ошибок

Иногда запрос может «зависнуть», и вам нужно вручную задать тайм-аут. Для этого можно использовать AbortController.

async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const signal = controller.signal;

  const timer = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, { signal });
    clearTimeout(timer);
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Код: ${response.status}`);
    }
    const data = await response.json();
    console.log('Данные из API:', data);
  } catch (error) {
    if (error.name === 'AbortError') {
      console.error('Запрос отменён: превышено время ожидания');
    } else {
      console.error('Произошла ошибка:', error);
    }
  }
}

fetchWithTimeout('https://api.example.com/data', 3000);

Здесь запрос автоматически прерывается, если не выполнится за 3 секунды.

Работа с приватными API: аутентификация

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

async function fetchProtectedData(token) {
  try {
    const response = await fetch('https://api.example.com/protected', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Код: ${response.status}`);
    }
    const data = await response.json();
    console.log('Защищённые данные:', data);
  } catch (error) {
    console.error('Ошибка доступа:', error);
  }
}

fetchProtectedData('ваш_токен_здесь');

Токен обычно выдаётся после входа пользователя в систему и может быть сроком действия (например, 1 час).

Советы и лучшие практики

Используйте try/catch для обработки ошибок. Это позволяет отлавливать как сетевые сбои, так и проблемы в логике кода.
Логируйте статусы HTTP. Это поможет диагностировать проблемы, особенно на этапе разработки.
Проверяйте производительность. Используйте инструменты, такие как Google Chrome DevTools, чтобы анализировать время запросов.
Ограничивайте частоту запросов. При работе с большими массивами данных используйте технику «дебаунса» или «троттлинга».
Используйте утилиты для работы с API. Например, Axios — это библиотека, которая упрощает отправку запросов.

Работа с API в JavaScript — это мощный инструмент для взаимодействия с внешними сервисами и серверами. Главное — понимать типы запросов, уметь обрабатывать ошибки и организовывать данные для удобного использования. Чем больше вы практикуетесь, тем увереннее чувствуете себя в проектах. Удачи в освоении API!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники

HTTP/3: зачем он нужен и как понять, что он работает

HTTP/3 — это новая версия протокола обмена данными между браузером и сервером. В отличие от предыдущих HTTP/1.1 и HTTP/2, он построен поверх протокола QUIC и использует UDP вместо TCP. Это делает соединения быстрее, стабильнее и безопаснее.

HTTP/3 доступен в Baseline в статусе «Newly Available» с 2024-09-16.

Чем HTTP/3 лучше

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Быстрее устанавливается соединение. Больше нет отдельной стадии TLS: всё объединено.
Меньше задержек. Даже при потере пакета браузер не ждёт восстановления всего потока, как в TCP.
Устойчивость к переключениям сети. QUIC сохраняет соединение, даже если пользователь, например, переключился с Wi-Fi на LTE.
Безопасность по умолчанию. Все соединения — только через шифрование (TLS 1.3).

Эти преимущества особенно важны для мобильных пользователей и тех, кто часто сталкивается с нестабильным интернетом.

Как работает

HTTP/3 основан на QUIC — это транспортный протокол от Google, который работает через UDP. Он умеет передавать данные параллельно по разным потокам, не блокируя друг друга при сбоях. QUIC внедрён в современные браузеры и серверные платформы.

Нужно ли что-то делать?

Если вы разработчик сайта или веб-приложения, то скорее всего ничего специально делать не нужно — браузер сам выберет HTTP/3, если сервер его поддерживает. Ваш сайт будет работать быстрее просто потому, что инфраструктура на это перешла.

Если вы настраиваете сервер (например, NGINX или Cloudflare), тогда стоит включить поддержку HTTP/3. На популярных платформах это можно сделать одной строчкой.

Как проверить, используется ли HTTP/3

В Chrome или Edge:

Откройте DevTools → вкладка Network.
Перезагрузите страницу.
Добавьте колонку Protocol (правый клик по шапке таблицы).
Посмотрите, есть ли h3 у запросов — это и есть HTTP/3.

Через терминал (если у вас установлен curl):

curl -I --http3 https://example.com

Если сервер не поддерживает HTTP/3, будет ошибка или произойдёт откат на HTTP/2.

Через JavaScript

На уровне кода нельзя напрямую узнать версию протокола, но можно сделать fetch и посмотреть заголовки ответа через инструменты разработчика:

fetch('https://example.com')
  .then(response => console.log(response.headers))

А затем проверить в DevTools, какой протокол был использован.

Что важно помнить

HTTP/3 — это не «фича», которую вы вызываете в коде, а часть транспортного уровня.
Он поддерживается большинством современных браузеров: Chrome, Firefox, Edge, Safari.
Но он работает только с HTTPS, как и HTTP/2.

Заключение

HTTP/3 делает интернет быстрее, безопаснее и стабильнее — особенно на слабых сетях и мобильных устройствах. Вам не нужно менять HTML, JavaScript или CSS, чтобы получить преимущество. Главное — чтобы сервер и хостинг поддерживали эту технологию.

Если вы разрабатываете сайт с упором на производительность — убедитесь, что HTTP/3 включён. Это шаг вперёд к более отзывчивым и доступным интерфейсам.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

27 июля 2025

10 приёмов работы с console, которые должен знать каждый разработчик

Консоль разработчика — важный инструмент отладки в JavaScript. С помощью методов console можно выводить информацию о работе скрипта, отслеживать ошибки, логировать данные и анализировать производительность. В браузере это доступно через панель разработчика (DevTools), обычно на вкладке «Console».

18 июля 2025

FormControl и FormGroup в Angular

Если вы разрабатываете веб-приложение, вам рано или поздно придётся собирать данные от пользователя. К счастью, реактивные формы в Angular позволяют делать это без лишней сложности — без нагромождения директив и с минимальным количеством шаблонного кода. Более того, их просто валидировать, так что можно обойтись даже без end-to-end тестов.

Говоря проще, form control’ы в Angular дают полный контроль разработчику — ничего не происходит автоматически, и каждое решение по вводу и управлению принимается явно и осознанно. В этом руководстве мы покажем, как объединять form control’ы в form group’ы, чтобы структурировать форму и упростить доступ к её элементам — как к логическим блокам. Чтобы лучше понять, как работают form group’ы в Angular, мы шаг за шагом соберём реактивную форму.

Для работы с примером скачайте стартовый проект с GitHub и откройте его в VS Code. Если ещё не обновляли Angular, поставьте актуальную на момент написания версию — Angular v18.

1 июня 2025

AOT против JIT-компилятора: что лучше для разработки на Angular?

Angular — один из самых популярных фреймворков для фронтенда — предлагает два подхода к компиляции: предварительная компиляция и динамическая компиляция во время выполнения. Оба метода играют важную роль в оптимизации приложений на Angular и повышении их производительности. В этом материале мы рассмотрим различия между ними, их преимущества и разберёмся, когда стоит использовать каждый из подходов.

25 мая 2025

Динамические формы в Angular 19: пошаговое руководство

Формы — неотъемлемая часть большинства веб-приложений: будь то регистрация, ввод данных или опросы. Модуль реактивных форм в Angular отлично подходит для создания статичных форм, но во многих случаях требуется, чтобы форма могла динамически адаптироваться в зависимости от действий пользователя или внешних данных.

В этой статье мы рассмотрим, как создавать динамические формы с использованием автономных компонентов в Angular 19, применяя модульный подход, который избавляет от необходимости использовать традиционные модули Angular. В сопроводительном репозитории на GitHub для оформления форм используется Tailwind CSS, однако в статье внимание сосредоточено исключительно на логике динамических форм. Tailwind и связанные с ним настройки намеренно не включены в примеры, чтобы сохранить акцент на основной теме.

25 мая 2025

Как обнаружить изменения в Angular: пошаговая инструкция

Как разработчики на Angular, мы нередко задумываемся, как фреймворк отслеживает изменения в данных и затем отображает их во вьюхе. Этот процесс называется стратегией обнаружения изменений в Angular. В этом материале мы разберёмся, как это работает, и научимся выбирать подходящую стратегию для разных сценариев.

24 мая 2025

Компоненты в Angular 18: пошаговое руководство

Angular развивается стремительно, и с выходом версии 18 появились новые возможности, которые разработчики могут использовать в своей работе. Одним из ключевых изменений в Angular 18 стало удаление традиционного файла app.module.ts — ему на смену пришли standalone-компоненты. Если вы только начинаете работать с Angular или переходите с более ранней версии, это пошаговое руководство поможет вам разобраться в базовых принципах компонентов в Angular 18. Независимо от вашего уровня — новичок вы или опытный разработчик — этот туториал покажет, как создавать, управлять и эффективно использовать компоненты в Angular.

19 мая 2025

Полное руководство по Angular @if

Одно из самых заметных нововведений в Angular — это встроенный синтаксис для управляющих конструкций, который появился в версии 17. Он решает одну из самых частых задач, с которой сталкивается каждый разработчик: показывать или скрывать элементы на странице в зависимости от условия. Раньше для этого использовали привычную структурную директиву *ngIf. Теперь у нас есть более современная альтернатива — синтаксис @if, часть нового подхода к управлению шаблоном.

В этом гайде мы сравним оба варианта, разберёмся, чем @if лучше, и покажем, как можно перейти на него автоматически. Также поговорим об одной распространённой ошибке — о том, как не стоит использовать @if вместе с пайпом async.

18 мая 2025

Модули Angular для организации кода и ленивой загрузки

Модули — один из ключевых инструментов Angular для построения масштабируемых и поддерживаемых приложений. В этой статье мы подробно рассмотрим:

что такое модули в Angular;
зачем они нужны;
как их использовать для структурирования кода;
как реализовать «ленивую» загрузку модулей;
и чем отличаются Feature, Core и Shared модули.

Если вы только начинаете изучать Angular или хотите углубить свои знания, эта статья поможет вам лучше понять, как правильно организовать архитектуру Angular-приложения.

12 мая 2025

Навигация в Angular: RouterLink, Router.navigate и Router.navigateByUrl

Директива RouterLink позволяет настраивать переходы между маршрутами прямо в шаблоне Angular. А методы Router.navigate и Router.navigateByUrl, доступные в классе Router, дают возможность управлять навигацией программно — прямо из кода компонентов.

Разберёмся, как работают RouterLink, Router.navigate и Router.navigateByUrl.

11 мая 2025

Всё, что нужно знать о работе с API в JavaScript: пошаговый разбор

Что такое API и зачем оно нужно

Как отправить базовый GET-запрос с помощью Fetch API

Возможные статусы HTTP-ответов:

Асинхронный подход с использованием async/await

Как отправить данные с помощью POST-запроса

Обработка тайм-аута и сетевых ошибок

Работа с приватными API: аутентификация

Советы и лучшие практики

Читать дальше

Чем HTTP/3 лучше

Как работает

Нужно ли что-то делать?

Как проверить, используется ли HTTP/3

В Chrome или Edge:

Через терминал (если у вас установлен curl):

Через JavaScript

Что важно помнить

Заключение

Вход

Регистрация

Восстановление доступа

Запишитесь на консультацию