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

Работа с 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'
});

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

1. headers указывают, что данные отправляются в формате JSON.
2. body содержит данные в виде строки (метод JSON.stringify).
3. Сервер может ответить статусами вроде 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!

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