Fetch API/AJAX без jQuery

[kirilljsx]

Современный JavaScript предоставляет всё необходимое для работы с API «из коробки»: fetch(), async/await, AbortController, потоковая обработка.

Все просто, коротко и понятно.

Базовый синтаксис Fetch API

Простейший GET-запрос:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('Ошибка сети');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('Ошибка:', err));

Важно: fetch не выбрасывает ошибку при HTTP-статусах 4xx/5xx. Проверяйте response.ok.

Современный подход: async/await

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Не удалось загрузить данные:', error);
    throw error; // для обработки выше по стеку
  }
}

Этот стиль стандарт де-факто в 2025 году. Он читаем, отлаживаем и легко тестируем.

POST, PUT, DELETE: отправка данных

const createUser = async (userData) => {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest' // если нужно для legacy-бэкенда
    },
    body: JSON.stringify(userData)
  });

  if (!response.ok) {
    const errorText = await response.text();
    throw new Error(`Ошибка ${response.status}: ${errorText}`);
  }

  return await response.json();
};

Лучшая практика - всегда указывайте Content-Type, особенно при работе с JSON.

AbortController - Одна из самых недооценённых фич Fetch API.

const controller = new AbortController();
const { signal } = controller;

// Запуск запроса с возможностью отмены
fetch('/api/long-task', { signal })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос отменён');
    } else {
      console.error('Ошибка:', err);
    }
  });

// Отмена через 2 секунды
setTimeout(() => controller.abort(), 2000);

Применение: автокомплит, поиск в реальном времени, навигация между страницами (чтобы не обрабатывать устаревшие ответы).

---

Обработка ошибок: полная стратегия

Fetch требует явной обработки трёх уровней ошибок:

• Сетевая ошибка (нет интернета, CORS, DNS) → ловится в catch.
• HTTP-ошибка (404, 500) → проверяется через response.ok.
• Ошибка парсинга JSON → ловится при response.json().

async function safeFetch(url) {
  let response;
  try {
    response = await fetch(url);
  } catch (networkError) {
    throw new Error('Нет соединения с сервером');
  }

  if (!response.ok) {
    throw new Error(`Сервер вернул ${response.status}`);
  }

  try {
    return await response.json();
  } catch (parseError) {
    throw new Error('Некорректный формат ответа');
  }
}

---

Утилита для проектов: универсальный apiClient

// apiClient.js
const createApiClient = (baseURL = '') => {
  const request = async (endpoint, options = {}) => {
    const url = baseURL + endpoint;
    const config = {
      headers: {
        'Content-Type': 'application/json',
        ...options.headers
      },
      ...options
    };

    const response = await fetch(url, config);

    if (!response.ok) {
      const text = await response.text();
      throw new Error(`[${response.status}] ${text || response.statusText}`);
    }

    const contentType = response.headers.get('content-type');
    return contentType?.includes('application/json') 
      ? await response.json() 
      : await response.text();
  };

  return {
    get: (endpoint) => request(endpoint, { method: 'GET' }),
    post: (endpoint, body) => request(endpoint, { method: 'POST', body: JSON.stringify(body) }),
    put: (endpoint, body) => request(endpoint, { method: 'PUT', body: JSON.stringify(body) }),
    delete: (endpoint) => request(endpoint, { method: 'DELETE' })
  };
};

// Использование
const api = createApiClient('https://api.yoursite.com/v1');
api.get('/users').then(users => console.log(users));

Такой подход:

• Убирает дублирование кода.
• Централизует обработку ошибок.
• Легко расширяется (авторизация, логирование, retry-логика).