Налаштування 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 та утечка пам'яті при швидкій навігації між екранами.

Обробка помилок

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

try {
  await getProducts(1);
} catch (error) {
  if (isAxiosError(error)) {
    if (!error.response) {
      // Мережева помилка — немає з'єднання
    } else {
      const status = error.response.status;
      // 400, 422, 500...
    }
  }
}

Інтеграція з React Query (@tanstack/react-query) або SWR переносить обробку помилок та кешування на рівень бібліотеки — рекомендується для більшості додатків.

Терміни

Базове налаштування з auth-перехоплювачем: 3–6 годин. З типізацією, React Query та обробкою помилок: 1–2 дні. Ціна розраховується індивідуально.