Axios: перехватчики и базовый URL
Создавайте экземпляр Axios с baseURL, добавляйте токены авторизации в перехватчиках запросов и обрабатывайте ошибки 4xx/5xx в перехватчиках ответов.
«Axios: перехватчики и базовый URL» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Зачем использовать Аксиос
Аксиос — популярный HTTP-клиент, построенный на механизме браузерных запросов. Он добавляет автоматическую обработку JSON, перехватчики запросов и ответов, настройку baseURL, время ожидания и токены отмены запросов. Многие команды по-прежнему предпочитают его fetch.
Установка Аксиос
Установите библиотеку с помощью менеджера пакетов. Размер браузерной сборки составляет около 14 КБ после сжатия gzip.
npm install axiosБазовые GET- и POST-запросы
Аксиос автоматически преобразует тела JSON в строки и разбирает ответы JSON — не нужно вручную вызывать JSON.stringify или .json().
import axios from 'axios';
const { data } = await axios.get('/api/users');
console.log(data); // already parsed
const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);Создание экземпляра Аксиос
Создайте настроенный экземпляр для своего API, чтобы не повторять базовый адрес, заголовки и время ожидания в каждом вызове.
import axios from 'axios';
export const api = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
});
// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });Перехватчик запроса: token авторизации
Добавляйте token авторизации к каждому запросу, не повторяя один и тот же код.
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});Перехватчик ответа: глобальная обработка ошибок
Централизуйте обработку ошибок для всех ответов: перенаправляйте при 401, показывайте всплывающее уведомление при 5xx и так далее.
api.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
window.location.href = '/login';
}
if (error.response?.status >= 500) {
toast.error('Server error. Please try again.');
}
return Promise.reject(error);
}
);Обновление token при 401
Используйте перехватчик ответа, чтобы обнаружить 401, обновить token и незаметно повторить исходный запрос.
api.interceptors.response.use(null, async (error) => {
const originalRequest = error.config;
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const newToken = await refreshToken();
localStorage.setItem('token', newToken);
originalRequest.headers.Authorization = `Bearer ${newToken}`;
return api(originalRequest); // retry
}
return Promise.reject(error);
});Параметры URL и строки запроса
Axios принимает объект params — он автоматически преобразуется в строку запроса.
const { data } = await api.get('/search', {
params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2Тайм-ауты
Установите тайм-аут запроса, чтобы он не зависал при медленном ответе сервера.
api.get('/slow-endpoint', { timeout: 5000 })
.catch(err => {
if (err.code === 'ECONNABORTED') {
console.log('Request took too long');
}
});Отмена запросов
Используйте AbortController в современной версии Axios или CancelToken в старом API.
const controller = new AbortController();
api.get('/big-data', { signal: controller.signal })
.catch(err => {
if (axios.isCancel(err)) console.log('cancelled');
});
controller.abort();Структура объекта ошибки
Ошибки Axios содержат error.response (сервер ответил статусом ошибки), error.request (ответ не получен) или ни одного из них (не удалось настроить запрос).
Axios и Fetch — что выбрать
Axios: более удобный API, встроенные перехватчики и более простая обработка ошибок. Fetch: встроенный API, меньший пакет сборки и современная поддержка потоковой передачи. В новых проектах часто выбирают Fetch с тонкой оболочкой; existing-проекты на Axios редко переходят на другой вариант.
Быстрая проверка
Какая возможность Axios позволяет добавлять заголовок авторизации к каждому запросу, не изменяя каждый отдельный вызов?
Итоги: Axios
axios.create() используется для настроенных экземпляров с baseURL и timeout. Ответы в формате JSON автоматически разбираются (res.data). Перехватчики запросов добавляют токены, а перехватчики ответов обрабатывают ошибки и обновляют токены. Объект params используется для строк запроса. Для отмены применяется AbortController. Выбирайте Axios за удобство, а Fetch с оболочкой — за меньший пакет сборки.
Часто задаваемые вопросы
Урок «Axios: перехватчики и базовый URL» бесплатный?
Да — полный текст урока «Axios: перехватчики и базовый URL» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Axios: перехватчики и базовый URL»?
Создавайте экземпляр Axios с baseURL, добавляйте токены авторизации в перехватчиках запросов и обрабатывайте ошибки 4xx/5xx в перехватчиках ответов. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Axios: перехватчики и базовый URL»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Fetch API: GET, POST, PUT и DELETE
- Axios: перехватчики и базовый URL
- Обработка ошибок: коды состояния HTTP
- SWR и React Query для кэширования данных