Что такое Axios и для чего он используется?react-86

Что такое Axios?

Axios — это популярная JavaScript-библиотека для выполнения HTTP-запросов, которая работает как в браузере, так и в Node.js. Это promise-based (основанный на промисах) клиент, который предоставляет удобный API для взаимодействия с RESTful сервисами.

Ключевые возможности

1. Простота использования

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

// POST-запрос
axios.post('/api/users', { name: 'John' })
  .then(response => console.log('User created:', response.data));

2. Автоматическая трансформация данных

  • Автоматически преобразует JSON-данные
  • Поддерживает transformRequest/transformResponse для кастомных преобразований

3. Перехватчики

Модификация запросов/ответов глобально:

// Добавление токена авторизации к каждому запросу
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
});

// Глобальная обработка ошибок
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // Перенаправление на страницу входа
    }
    return Promise.reject(error);
  }
);

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

const source = axios.CancelToken.source();

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

// Отмена запроса
source.cancel('Operation canceled by user');

5. Поддержка async/await

async function fetchUsers() {
  try {
    const response = await axios.get('/api/users');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
}

Преимущества перед нативным Fetch API

  1. Более удобный синтаксис — не нужно проверять response.ok и вызывать .json()
  2. Автоматические преобразования данных — не нужно вручную парсить JSON
  3. Прогресс загрузки — поддержка отслеживания прогресса загрузки
  4. Защита от XSRF — встроенная защита от межсайтовой подделки запроса
  5. Более богатая экосистема — interceptors, cancel tokens и др.

Типичные use cases

  1. Работа с REST API в React/Vue/Angular приложениях
  2. Загрузка файлов с отслеживанием прогресса
  3. Авторизованные запросы с JWT-токенами
  4. Обработка ошибок на глобальном уровне
  5. Мокинг API для тестирования с axios-mock-adapter

Пример конфигурации экземпляра Axios

// apiClient.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json'
  }
});

export default apiClient;

// Использование:
apiClient.get('/users').then(...);

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

axios.get('/api/users')
  .then(response => {
    // Обработка успешного ответа
  })
  .catch(error => {
    if (error.response) {
      // Ошибка от сервера (5xx, 4xx)
      console.log(error.response.status);
      console.log(error.response.data);
    } else if (error.request) {
      // Запрос был сделан, но ответ не получен
      console.log(error.request);
    } else {
      // Ошибка при настройке запроса
      console.log('Error', error.message);
    }
  });

Интеграция с React

Лучшие практики:

  1. Создавать отдельные сервисные модули для API-вызовов
  2. Использовать кастомные хуки для повторного использования логики запросов
  3. Комбинировать с Context API для глобального состояния

Пример кастомного хука:

function useApi(endpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(endpoint);
        setData(response.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [endpoint]);

  return { data, loading, error };
}

Резюмируем

Axios — это мощная, удобная и гибкая библиотека для HTTP-запросов, которая существенно упрощает работу с API по сравнению с нативным Fetch. Она предлагает богатый функционал для сложных сценариев работы с сетью и является стандартом де-факто в современных React-приложениях.

Вопросы

Собеседования