Настройка Axios для сетевых запросов в React Native-приложении

Настройка Axios для сетевых запросов в React Native-приложении

В React Native можно использовать нативный fetch, но Axios даёт интерцепторы, автоматическую JSON-трансформацию, отмену запросов через AbortController и удобную обработку ошибок. Для продакшн-приложения это важнее, чем экономия одного пакета.

Установка и базовый клиент

npm install axios

Создаём типизированный API-клиент — не используем глобальный axios напрямую:

import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';

const apiClient: AxiosInstance = axios.create({
  baseURL: process.env.API_BASE_URL ?? 'https://api.example.com/v1',
  timeout: 10_000,
  headers: { 'Content-Type': 'application/json' },
});

Интерцепторы

Auth интерцептор с обновлением токена:

apiClient.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const token = tokenStore.getAccessToken();
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  }
);

apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        const newToken = await tokenStore.refresh();
        originalRequest.headers.Authorization = `Bearer ${newToken}`;
        return apiClient(originalRequest);
      } catch {
        tokenStore.clear();
        navigationRef.navigate('Login');
      }
    }
    return Promise.reject(error);
  }
);

Флаг _retry предотвращает бесконечный цикл при ошибке refresh. Без него 401 на /refresh → новый refresh → 401 → бесконечность.

Логирование в dev-режиле через axios-logger или кастомный интерцептор:

if (__DEV__) {
  apiClient.interceptors.request.use((config) => {
    console.log(`→ ${config.method?.toUpperCase()} ${config.url}`);
    return config;
  });
}

Типизация ответов

interface PaginatedResponse<T> {
  data: T[];
  meta: { total: number; page: number; perPage: number };
}

async function getProducts(page: number): Promise<PaginatedResponse<Product>> {
  const { data } = await apiClient.get<PaginatedResponse<Product>>('/products', {
    params: { page, per_page: 20 },
  });
  return data;
}

Отмена запросов

React Native 0.71+ поддерживает AbortController нативно. Axios интегрируется с ним:

const controller = new AbortController();
apiClient.get('/feed', { signal: controller.signal });

// В useEffect cleanup:
return () => controller.abort();

Без отмены запросов в useEffect cleanup — возможен setState on unmounted component warning и утечка памяти при быстрой навигации между экранами.

Обработка ошибок

function isAxiosError(error: unknown): error is AxiosError {
  return axios.isAxiosError(error);
}

try {
  await getProducts(1);
} catch (error) {
  if (isAxiosError(error)) {
    if (!error.response) {
      // Network error — нет соединения
    } else {
      const status = error.response.status;
      // 400, 422, 500...
    }
  }
}

Интеграция с React Query (@tanstack/react-query) или SWR выносит обработку ошибок и кэширование на уровень библиотеки — рекомендуется для большинства приложений.

Сроки

Базовая настройка с auth-интерцептором: 3–6 часов. С типизацией, React Query и обработкой ошибок: 1–2 дня. Стоимость рассчитывается индивидуально.