Какие инструменты использовал для ассинхронного взаимодействия?

Инструменты асинхронного взаимодействия во Frontend-разработке

За годы работы с современным фронтендом я использовал широкий спектр инструментов для ассинхронного взаимодействия, которые можно разделить на несколько ключевых категорий.

Нативные API браузера

XMLHttpRequest (XHR) - исторически первый инструмент, который я использовал для AJAX-запросов. Несмотря на устаревание, понимание его работы важно для глубинного понимания асинхронности:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

Fetch API - современная замена XHR, которую я использую в большинстве проектов:

async function fetchData() {
    try {
        const response = await fetch('/api/data', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ key: 'value' })
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error;
    }
}

Библиотеки HTTP-клиентов

Axios - моя предпочтительная библиотека для сложных проектов благодаря интерцепторам, отмене запросов и автоматической трансформации данных:

import axios from 'axios';

// Создание инстанса с настройками
const apiClient = axios.create({
    baseURL: process.env.API_URL,
    timeout: 10000,
    headers: { 'X-Custom-Header': 'value' }
});

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

// Использование с отменой запроса
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

apiClient.get('/users', {
    cancelToken: source.token
}).catch(thrown => {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled:', thrown.message);
    }
});

// Для отмены запроса: source.cancel('Operation canceled');

React Query (TanStack Query) - революционный инструмент, который я активно использую для управления серверным состоянием:

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

function UserProfile({ userId }) {
    const queryClient = useQueryClient();
    
    // Автоматическое кэширование, рефетчинг, retry логика
    const { data, isLoading, error } = useQuery({
        queryKey: ['user', userId],
        queryFn: () => fetchUser(userId),
        staleTime: 5 * 60 * 1000, // 5 минут
        retry: 3
    });
    
    const mutation = useMutation({
        mutationFn: updateUser,
        onSuccess: () => {
            // Инвалидация кэша и обновление данных
            queryClient.invalidateQueries(['user', userId]);
        },
        onError: (error) => {
            console.error('Update failed:', error);
        }
    });
    
    // ... компонент
}

WebSockets и реальное время

Socket.io - для проектов, требующих двусторонней связи в реальном времени:

import io from 'socket.io-client';

class RealTimeService {
    constructor() {
        this.socket = io(process.env.WS_URL, {
            transports: ['websocket'],
            reconnection: true,
            reconnectionAttempts: 5
        });
        
        this.setupListeners();
    }
    
    setupListeners() {
        this.socket.on('connect', () => {
            console.log('Connected to WebSocket server');
        });
        
        this.socket.on('new-message', (message) => {
            this.handleNewMessage(message);
        });
        
        this.socket.on('disconnect', (reason) => {
            console.log('Disconnected:', reason);
        });
    }
    
    sendMessage(content) {
        this.socket.emit('send-message', {
            content,
            timestamp: Date.now()
        });
    }
}

GraphQL с Apollo Client - для сложных проектов с требовательной логикой данных:

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

const client = new ApolloClient({
    uri: '/graphql',
    cache: new InMemoryCache({
        typePolicies: {
            User: {
                fields: {
                    posts: {
                        merge(existing = [], incoming) {
                            return [...existing, ...incoming];
                        }
                    }
                }
            }
        }
    })
});

// Запрос с переменными и фрагментами
const GET_USER_WITH_POSTS = gql`
    query GetUser($id: ID!, $limit: Int) {
        user(id: $id) {
            id
            name
            email
            posts(limit: $limit) {
                id
                title
                createdAt
            }
        }
    }
`;

Дополнительные инструменты и паттерны

• React Suspense для Data Fetching - экспериментальный, но перспективный подход
• Service Workers для фоновой синхронизации и офлайн-работы
• Web Workers для вычислительно сложных задач без блокировки UI
• EventEmitter/паттерн Observer для внутренней коммуникации компонентов
• Redux с middleware (redux-thunk, redux-saga, redux-observable) для сложных асинхронных потоков

Критерии выбора инструментов

При выборе инструментов я руководствуюсь:

1. Требованиями проекта - простой CRUD или сложное real-time приложение
2. Размером команды и соглашениями - стандартизация важна для поддержки кода
3. Производительностью - минимизация bundle size, оптимизация запросов
4. Опытом команды - использование знакомых инструментов повышает эффективность
5. Экосистемой - наличие TypeScript типов, devtools, сообщества

Современный фронтенд требует комбинации этих инструментов: например, React Query для данных, WebSockets для реального времени и Service Workers для офлайн-возможностей. Ключевой навык - не просто знание API, а понимание, когда и какой инструмент применять для оптимального пользовательского опыта.