Если ты хоть раз писал фронтенд на React, то наверняка сталкивался с задачей: как бы элегантно и без боли дернуть API, получить данные, обработать и вывести их юзеру. Можно, конечно, использовать родной fetch, но если хочется чуть больше удобства, обработки ошибок и всяких плюшек, то тут на сцену выходит Axios. Это такой себе швейцарский нож для HTTP-запросов в мире JS.

Возможности Axios

• Работает с промисами (async/await – наше всё)
• Поддержка отмены запросов
• Интерцепторы для обработки запросов/ответов на лету
• Автоматическая трансформация JSON
• Удобная обработка ошибок
• Работает и в браузере, и в Node.js

Что требуется для старта

• Любая современная ОС (Windows, MacOS, Linux – без разницы)
• Node.js версии 14+ (чтобы не было сюрпризов с пакетами)
• npm или yarn (кому что ближе)
• Проект на React (или просто папка, куда будешь всё ставить)

Установка – шаг за шагом

1. Проверь, что у тебя есть Node.js:

   node -v

   Если нет – ставь отсюда.

2. Создай новый проект на React (если ещё нет):

   npx create-react-app my-app
   cd my-app

3. Установи Axios:

   npm install axios

   или, если ты по old-school:

   yarn add axios

4. Готово! Можно юзать Axios в своём проекте.

Использование: полный список команд и вариантов

Вот базовые команды, которые пригодятся в 95% случаев:

• GET-запрос:

  
  import axios from 'axios';
  
  axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
      

• POST-запрос:

  
  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
    .then(response => console.log(response.data))
    .catch(error => console.error(error));
      

• PUT и PATCH:

  
  axios.put('https://jsonplaceholder.typicode.com/posts/1', { title: 'new title' });
  axios.patch('https://jsonplaceholder.typicode.com/posts/1', { title: 'patched title' });
      

• DELETE:

  
  axios.delete('https://jsonplaceholder.typicode.com/posts/1');
      

• С использованием async/await (рекомендуется):

  
  import React, { useEffect, useState } from 'react';
  import axios from 'axios';
  
  function App() {
    const [posts, setPosts] = useState([]);
  
    useEffect(() => {
      const fetchData = async () => {
        try {
          const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
          setPosts(res.data);
        } catch (e) {
          console.error(e);
        }
      };
      fetchData();
    }, []);
  
    return (
      <div>
        {posts.map(post => <div key={post.id}>{post.title}</div>)}
      </div>
    );
  }
  
  export default App;
      

• Интерцепторы (для токенов, логирования и прочего):

  
  axios.interceptors.request.use(config => {
    // Добавить токен, если надо
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  }, error => Promise.reject(error));
      

Официальная дока по конфигам и опциям

Ошибки и как делать не надо

• Не обрабатываешь ошибки? Даже если API всегда твой, всё равно делай .catch или try/catch. Иначе словишь баг, который будешь потом полгода искать.
• Делаешь запросы в рендере компонента? Не надо. Используй useEffect, иначе можешь получить бесконечный цикл запросов.
• Хранишь axios-инстанс внутри компонента? Лучше вынеси в отдельный модуль, если у тебя кастомная настройка (базовый URL, заголовки и т.д.).
• Забыл про отмену запросов? Если компонент размонтируется до получения ответа – будет warning. Используй отмену запросов через AbortController.

Реальный пример в рабочем окружении

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
});

function UsersList() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;
    api.get('/users')
      .then(res => {
        if (isMounted) setUsers(res.data);
      })
      .catch(err => {
        if (isMounted) setError(err.message);
      });
    return () => { isMounted = false; };
  }, []);

  if (error) return <div>Error: {error}</div>;
  if (!users.length) return <div>Loading...</div>;

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name} ({u.email})</li>)}
    </ul>
  );
}

export default UsersList;

Тут мы создали отдельный инстанс api с базовым URL и таймаутом, дернули список пользователей, обработали ошибку и показали лоадер. Всё как на проде.

Заключение

Axios – реально удобная штука для работы с HTTP в React. Да, можно и на fetch, но с Axios меньше кода, больше фичей и меньше боли с обработкой ошибок. Не забывай про best practices: обрабатывай ошибки, не спамь запросами из рендера, используй async/await. Если хочется копнуть глубже – чекай официальную документацию и репозиторий на GitHub. Удачи в продакшене и пусть твои запросы всегда возвращают 200!