Преимущества использования Axios для запросов — обзор библиотеки и её функций

Введение

Если вы уже освоили fetch(), возможно, у вас возникает вопрос: "Зачем нам еще и Axios? Разве fetch недостаточно хорош?"

Взглянем на правду программирования: fetch хорош, но не идеален. В определённых случаях вам может понадобиться дополнительная гибкость, удобство настройки и обработка запросов. Axios, как библиотека для работы с HTTP-запросами, предоставляет мощный функционал, который делает ваше приложение готовым к решению более сложных задач.

Вот простой пример: с fetch вам нужно вручную обрабатывать преобразование данных в JSON и обрабатывать ошибки ответа. Axios же сделает это за вас "из коробки".

Преимущества Axios в сравнении с fetch

Давайте взглянем на некоторые ключевые моменты, которые делают Axios крутой библиотекой для работы с запросами:

1. Автоматическое преобразование данных: Axios автоматически преобразует JSON-ответы в объекты JavaScript. Вам больше не нужно вручную прописывать response.json().

2. Лучшая обработка ошибок: Axios обрабатывает коды ответов HTTP (например, 404 или 500) и автоматически отклоняет Promise. С fetch вам пришлось бы вручную проверять response.ok.

3. Поддержка отмены запросов: Axios предоставляет API для отмены выполненных или ожидающих запросов через токены отмены CancelToken.

4. Настройка базового URL: если ваш API состоит из множества конечных точек, вы можете один раз указать базовый URL, что упрощает вызовы.

5. Поддержка перехватчиков (interceptors): перехватчики позволяют добавлять или изменять данные запросов и ответов глобально. Например, вставить токен для авторизации во все запросы.

6. Поддержка более старых браузеров: Axios работает в более старых версиях браузеров, в отличие от fetch, который может потребовать полифиллов.

Теперь, когда вы знаете теорию, попробуем применить её на практике.

Установка Axios в проект

Для начала установим Axios. Это делается через npm или yarn:

npm install axios

Или с использованием yarn:

yarn add axios

После установки вы можете импортировать Axios в код:

import axios from 'axios';

Базовый пример использования Axios

Представим, что у нас есть API, которое возвращает данные о пользователях. Сначала посмотрим, как это выглядело бы с fetch:

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Something went wrong!');
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error));

А теперь пример с использованием Axios:

import axios from 'axios';

axios
  .get('https://jsonplaceholder.typicode.com/users')
  .then((response) => {
    console.log(response.data); // Axios сразу отдаёт данные
  })
  .catch((error) => {
    console.error('Error:', error.message);
  });

Чувствуете разницу? Код стал компактнее и проще для чтения.

Настройка глобальных параметров

Если вам нужно работать с одним и тем же API, вы можете настроить базовый URL:

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000, // Максимальное время ожидания запроса (в миллисекундах)
  headers: {
    'Content-Type': 'application/json',
  },
});

Теперь, используя созданный экземпляр apiClient, доступ к API становится проще:

apiClient.get('/users').then((response) => console.log(response.data));

Больше не нужно прописывать полный URL каждый раз. Стоит отметить, что через параметр headers можно передавать токены авторизации или другие полезные данные.

Обработка POST-запросов

Axios также отлично справляется с отправкой данных на сервер. Вот пример использования POST-запроса со структурой данных:

const newUser = {
  name: 'John Doe',
  email: 'john.doe@example.com',
};

axios
  .post('https://jsonplaceholder.typicode.com/users', newUser)
  .then((response) => {
    console.log('User created:', response.data);
  })
  .catch((error) => {
    console.error('Error creating user:', error.message);
  });

Axios автоматически преобразует объект newUser в JSON и отправляет его на сервер. Это избавляет нас от лишнего кода.

Использование перехватчиков для запросов и ответов

Перехватчики (interceptors) позволяют добавить логику для всех запросов или ответов глобально. Например, можно автоматически вставлять header с токеном авторизации в каждую отправку запроса:

axios.interceptors.request.use((config) => {
  const token = 'my-secret-token';
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Теперь любой запрос через axios будет включать Authorization
axios.get('https://jsonplaceholder.typicode.com/users');

Также можно использовать перехватчики для обработки ответов или обработки ошибок:

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error('Global error handler:', error.message);
    return Promise.reject(error); // Обязательно возвращаем ошибку
  }
);

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

Axios поддерживает отмену выполнения запросов. Особенно полезно, если вам нужно отменить долгие запросы или запросы, которые больше не актуальны (например, после переключения страниц).

import axios, { CancelToken } from 'axios';

const source = CancelToken.source();

axios
  .get('https://jsonplaceholder.typicode.com/users', {
    cancelToken: source.token,
  })
  .then((response) => console.log(response.data))
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error('Error:', error.message);
    }
  });

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

Преобразование данных запросов и ответов

Axios позволяет преобразовывать данные до и после их отправки/получения. Например:

axios.defaults.transformResponse = [
  function (data) {
    // Преобразуем JSON в верхний регистр (just for fun!)
    return JSON.parse(data).map((user: any) => ({
      ...user,
      name: user.name.toUpperCase(),
    }));
  },
];

axios.get('https://jsonplaceholder.typicode.com/users').then((response) => {
  console.log(response.data);
});

Реальное применение Axios

• Собеседования: знание Axios часто требуется в качестве навыка на фронтенд-разработчика. Выглядит лучше, чем просто умение работать с fetch.
• Работа: в реальной разработке вы постоянно сталкиваетесь с задачами интеграции с API. Axios позволяет легче и быстрее решать эти проблемы, что делает разработку более эффективной.

Не бойтесь дополнять Axios собственными хуками или использовать его в глобальной конфигурации. Он идеально подходит для любых приложений — от небольших до крупных корпоративных проектов.