Как можно делать запросы в JavaScript помимо axios?

Основные способы делать HTTP запросы в JavaScript

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

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

Fetch API — это встроенный в браузер стандарт для выполнения HTTP запросов. Это современная замена XMLHttpRequest. Он поддерживается всеми современными браузерами.

// Простой GET запрос
const response = await fetch(https://api.example.com/users);
const data = await response.json();
console.log(data);

// POST запрос с параметрами
const response = await fetch(https://api.example.com/users, {
  method: POST,
  headers: {
    Content-Type: application/json,
    Authorization: Bearer token
  },
  body: JSON.stringify({ name: John, email: john@example.com })
});

if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();

Преимущества: встроенный в браузер, нет зависимостей, стандартный API. Недостатки: нет встроенного таймаута, нет отмены запроса (нужен AbortController), нет прогресса загрузки.

2. XMLHttpRequest (legacy)

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

const xhr = new XMLHttpRequest();
xhr.open(GET, https://api.example.com/users);
xhr.responseType = json;

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.error(Error, xhr.status);
  }
};

xhr.onerror = function() {
  console.error(Network error);
};

xhr.send();

3. Fetch с оборачиванием (wrapper)

Можно создать собственный wrapper над Fetch для добавления функционала, который есть в axios:

const apiClient = {
  async request(url, options = {}) {
    const response = await fetch(url, {
      headers: {
        Content-Type: application/json,
        ...options.headers
      },
      ...options
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message || HTTP error);
    }

    return response.json();
  },

  get(url, options) {
    return this.request(url, { ...options, method: GET });
  },

  post(url, data, options) {
    return this.request(url, {
      ...options,
      method: POST,
      body: JSON.stringify(data)
    });
  }
};

await apiClient.post(/api/users, { name: John });

4. GraphQL клиенты (для GraphQL API)

Если API использует GraphQL вместо REST, нужно использовать специализированные клиенты:

import { ApolloClient, InMemoryCache, gql } from @apollo/client;

const client = new ApolloClient({
  uri: https://api.example.com/graphql,
  cache: new InMemoryCache()
});

const query = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

const { data } = await client.query({ query });

5. Специализированные библиотеки

• TanStack Query (React Query) — управление состоянием асинхронных данных с кешированием
• SWR — lightweight хук для получения данных
• Undici — высокопроизводительный HTTP клиент для Node.js

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

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

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

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

Когда использовать что?

• Fetch API: для простых запросов в современных браузерах, минимум зависимостей
• axios: если нужна абстракция над Fetch и дополнительные возможности
• GraphQL клиенты: для работы с GraphQL API
• TanStack Query: для сложного управления состоянием асинхронных данных в React приложениях
• XMLHttpRequest: только если поддерживаешь старые браузеры (IE)

В современной практике Frontend Developer должен хорошо понимать Fetch API, потому что это стандарт. axios используется, но это не обязательно — часто можно ограничиться Fetch. Также важно знать о React Query для эффективного управления асинхронными данными.