Используешь ли AJAX в проекте

Использование AJAX в современных проектах

AJAX (Asynchronous JavaScript and XML) - это технология, которая позволяет обмениваться данными с сервером асинхронно без перезагрузки страницы. В современной разработке AJAX остаётся актуальным, но его реализация значительно эволюционировала.

Эволюция подходов

XMLHttpRequest (классический AJAX)

Оригинальный способ реализации AJAX, использовавшийся десятилетиями:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.onerror = function() {
  console.error('Ошибка запроса');
};
xhr.send();

Этот подход требует обработки множества callback'ов и имеет низкий уровень удобства.

Fetch API (современный стандарт)

Since ES2015, Fetch API стал стандартом для HTTP-запросов:

fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

Fetch API предоставляет:

• Чистый Promise-based интерфейс
• Лучшую обработку ошибок
• Встроенную поддержку различных типов контента
• Headers и Request/Response объекты

Async/Await синтаксис

Модерный способ работы с асинхронными операциями:

async function fetchUsers() {
  try {
    const response = await fetch('/api/users');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Ошибка при загрузке пользователей:', error);
  }
}

Этот синтаксис делает асинхронный код более читаемым и похожим на синхронный.

Использование в React

В современных React приложениях AJAX запросы обычно оборачиваются в хуки или высокоуровневые библиотеки:

import { useEffect, useState } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadUsers = async () => {
      try {
        const response = await fetch('/api/users');
        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    loadUsers();
  }, []);

  if (loading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error.message}</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Библиотеки для работы с AJAX

Axios - популярная библиотека с удобным API:

import axios from 'axios';

axios.get('/api/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

React Query / TanStack Query - управление состоянием асинхронных данных:

import { useQuery } from '@tanstack/react-query';

function UsersList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json())
  });

  return data ? <div>{data.length} пользователей</div> : null;
}

Практические соображения

Обработка ошибок - критически важна для надёжности:

try {
  const response = await fetch('/api/users');
  if (!response.ok) throw new Error('Network response was not ok');
  const data = await response.json();
  return data;
} catch (error) {
  console.error('Fetch error:', error);
  // Отправить ошибку в систему логирования
  logError(error);
}

Abort Controller для отмены запросов:

const controller = new AbortController();

fetch('/api/users', { signal: controller.signal })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Запрос был отменён');
    }
  });

// Отменить запрос через 5 секунд
setTimeout(() => controller.abort(), 5000);

Итог

AJAX остаётся фундаментальной технологией веб-разработки, но современные подходы (Fetch API, async/await, React Query) предоставляют значительно лучший опыт разработки. Выбор инструмента зависит от сложности приложения и требований к управлению состоянием асинхронных данных.