Использование Axios в React Native

Axios — это популярная библиотека для выполнения HTTP-запросов. В React Native её можно использовать точно так же, как и в обычном JavaScript-приложении. Хотя встроенный fetch часто достаточен, Axios предоставляет ряд удобств, особенно в крупных проектах.

Установка

Чтобы начать использовать Axios, установите его через npm:

npm install axios

После этого импортируйте в компонент:

import axios from 'axios';

Основные преимущества перед `fetch`

Автоматическое преобразование JSON
При использовании Axios ответ уже содержит распарсенные данные в свойстве data. Не нужно вызывать .json().
Выбрасывание ошибок при HTTP-ошибках
Если сервер возвращает статус 4xx или 5xx, Axios автоматически отклоняет промис. Это упрощает обработку ошибок — не нужно проверять response.ok.
Поддержка таймаутов
Можно задать максимальное время ожидания ответа:
```
axios.get('https://api.example.com/data', { timeout: 5000 });
```
Интерцепторы (перехватчики)
Позволяют централизованно обрабатывать все запросы и ответы — например, добавлять токен авторизации или логировать ошибки.

Пример базового запроса

const fetchData = async () => {
  try {
    const response = await axios.get<User[]>('https://jsonplaceholder.typicode.com/users');
    const users = response.data; // уже типизировано и распарсено
    console.log(users);
  } catch (error) {
    if (axios.isAxiosError(error)) {
      if (error.code === 'ECONNABORTED') {
        console.error('Таймаут запроса');
      } else if (error.response) {
        console.error('Ошибка сервера:', error.response.status);
      } else if (error.request) {
        console.error('Нет ответа от сервера — возможно, нет интернета');
      }
    } else {
      console.error('Неизвестная ошибка:', error);
    }
  }
};

Здесь используется встроенная проверка axios.isAxiosError, чтобы безопасно работать с ошибками.

Сравнение с `fetch`

Возможность	`fetch`	`Axios`
Парсинг JSON	Требуется `.json()`	Автоматический
Ошибки при 4xx/5xx	Нет — нужно проверять `ok`	Да — промис отклоняется
Таймаут	Только через `AbortController`	Встроенный параметр `timeout`
Интерцепторы	Нет	Есть
Размер бандла	Встроен — 0 KB	~12 KB (gzip)

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

В проектах с множеством API-запросов.
Когда нужна централизованная обработка авторизации или логирования.
Если важна читаемость кода и меньше шаблонного кода для обработки ошибок.

В небольших приложениях fetch часто предпочтительнее, так как не увеличивает размер бандла и не требует зависимостей.