Какие знаешь способы взаимодействия с API в браузере?

Способы взаимодействия с API в браузере

В современных веб-приложениях взаимодействие с API (Application Programming Interface) является фундаментальной частью архитектуры. Я выделяю несколько ключевых способов, которые можно разделить на нативные браузерные API и сторонние библиотеки/инструменты.

1. XMLHttpRequest (XHR)

Это исторически первый способ асинхронного взаимодействия с сервером, появившийся ещё в конце 1990-х. Несмотря на возраст, он до сих пор поддерживается всеми браузерами.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.onerror = function() {
    console.error('Request failed');
};
xhr.send();

Преимущества: Полная совместимость, тонкий контроль над запросом.
Недостатки: Громоздкий синтаксис, отсутствие поддержки промисов "из коробки".

2. Fetch API

Современная замена XHR, представленная в 2015 году. Использует Promise-based подход и предоставляет более чистый и мощный API.

// Базовый GET-запрос
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

// POST-запрос с настройками
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ key: 'value' })
});

Ключевые особенности:

• Возвращает промисы, что удобно для асинхронного кода
• Поддержка async/await
• Более гибкая работа с заголовками и кэшированием
• Встроенная поддержка CORS (Cross-Origin Resource Sharing)

3. Axios

Популярная сторонняя библиотека, которая представляет собой обёртку над XHR (в браузере) и http-модулем (в Node.js). Главное преимущество — единообразный API для браузера и сервера.

import axios from 'axios';

// GET-запрос
axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

// POST-запрос с интерцепторами
const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 1000,
    headers: { 'X-Custom-Header': 'value' }
});

// Добавление интерцептора
instance.interceptors.request.use(
    config => {
        config.headers.Authorization = `Bearer ${token}`;
        return config;
    },
    error => Promise.reject(error)
);

Плюсы Axios:

• Автоматическая трансформация JSON
• Интерцепторы для глобальной обработки запросов/ответов
• Защита от XSRF
• Отмена запросов через CancelToken (в старых версиях) или AbortController
• Прогресс загрузки

4. WebSocket

Для двусторонней реальной коммуникации используется протокол WebSocket, который создаёт постоянное соединение между клиентом и сервером.

const socket = new WebSocket('wss://api.example.com/ws');

socket.onopen = () => {
    socket.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
};

socket.onmessage = (event) => {
    console.log('Data received:', event.data);
};

socket.onclose = () => {
    console.log('Connection closed');
};

5. Server-Sent Events (SSE)

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

const eventSource = new EventSource('/api/stream');

eventSource.onmessage = (event) => {
    console.log('New event:', event.data);
};

eventSource.addEventListener('customEvent', (event) => {
    console.log('Custom event:', event.data);
});

6. GraphQL через Apollo Client или Relay

Для работы с GraphQL API используются специализированные клиенты:

// Apollo Client пример
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

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

client.query({
    query: gql`
        query GetData($id: ID!) {
            item(id: $id) {
                id
                name
            }
        }
    `,
    variables: { id: '123' }
});

7. Библиотеки для управления состоянием запросов

Для сложных приложений часто используются надстройки:

• React Query / TanStack Query — кэширование, синхронизация, инвалидация
• SWR (Stale-While-Revalidate) — стратегия кэширования от Vercel
• RTK Query — решение для Redux Toolkit

Сравнительная таблица

Ключевые аспекты при выборе метода:

1. Поддержка браузеров — для legacy-проектов может потребоваться полифиллы
2. Сложность логики запросов — для простых случаев достаточно fetch, для сложных — Axios
3. Размер бандла — Axios добавляет ~13KB, тогда как fetch нативен
4. Требования к реальному времени — WebSocket или SSE
5. Тип API — REST, GraphQL или RPC влияют на выбор клиента

В современных проектах я чаще всего использую Fetch API для простых случаев и Axios для сложных приложений с требовательной логикой авторизации, повторных запросов и глобальной обработки ошибок. Для GraphQL предпочитаю Apollo Client из-за его развитой экосистемы.