Axios и его интеграция с Vue

Axios — это HTTP-клиент на основе промисов, предназначенный для выполнения запросов к серверу из браузера или среды Node.js. В проектах на Vue.js Axios используется для взаимодействия с REST API, загрузки и отправки данных, обработки авторизации и управления состоянием загрузки и ошибок. Он не входит в стандартную поставку Vue, но фактически стал де-факто стандартом для сетевого слоя во Vue-приложениях.

Ключевые характеристики Axios:

  • поддержка промисов и async/await
  • автоматическая трансформация JSON
  • перехватчики запросов и ответов
  • отмена запросов
  • централизованная конфигурация

Установка и подключение

Установка выполняется через менеджер пакетов:

npm install axios

или

yarn add axios

В простейшем варианте Axios импортируется напрямую в компонент:

import axios FROM 'axios'

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

Создание экземпляра Axios

Экземпляр Axios позволяет задать общие параметры для всех запросов: базовый URL, заголовки, таймауты.

import axios from 'axios'

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

export default api

Преимущества использования экземпляра:

  • единая точка конфигурации
  • упрощение замены API
  • изоляция настроек от сторонних запросов

Интеграция с Vue через глобальные свойства

В Vue 3 Axios часто подключается через app.config.globalProperties:

import { createApp } from 'vue'
import App from './App.vue'
import api from './api'

const app = createApp(App)
app.config.globalProperties.$axios = api
app.mount('#app')

После этого Axios доступен в компонентах:

this.$axios.get('/users')

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

Выполнение GET-запросов

Пример запроса на получение данных:

api.get('/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

С использованием async/await:

const loadUsers = async () => {
  try {
    const response = await api.get('/users')
    users.value = response.data
  } catch (error) {
    console.error(error)
  }
}

Ответ Axios содержит объект со структурой:

  • data — тело ответа
  • status — HTTP-статус
  • headers — заголовки
  • config — конфигурация запроса

POST, PUT, DELETE запросы

Отправка данных:

api.post('/users', {
  name: 'Alex',
  email: 'alex@example.com'
})

Обновление данных:

api.put(`/users/${id}`, updatedUser)

Удаление:

api.delete(`/users/${id}`)

Axios автоматически сериализует объект в JSON.

Работа с параметрами запроса

Query-параметры передаются через свойство params:

api.get('/users', {
  params: {
    page: 2,
    LIMIT: 10
  }
})

Axios корректно кодирует параметры и добавляет их к URL.

Перехватчики (Interceptors)

Перехватчики позволяют выполнять логику до отправки запроса и после получения ответа.

Перехватчик запроса

api.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

Применяется для:

  • добавления токена авторизации
  • логирования
  • модификации заголовков

Перехватчик ответа

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // обработка неавторизованного доступа
    }
    return Promise.reject(error)
  }
)

Используется для централизованной обработки ошибок.

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

Axios различает несколько типов ошибок:

  • ошибка ответа (error.response)
  • ошибка запроса (error.request)
  • ошибка конфигурации

Пример детальной обработки:

try {
  await api.get('/profile')
} catch (error) {
  if (error.response) {
    console.error(error.response.status)
  } else if (error.request) {
    console.error('Нет ответа от сервера')
  } else {
    console.error(error.message)
  }
}

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

Axios поддерживает отмену запросов через AbortController:

const controller = new AbortController()

api.get('/users', {
  signal: controller.signal
})

controller.abort()

Полезно при:

  • смене маршрута
  • повторных запросах при вводе
  • размонтировании компонента

Использование с Composition API

Типовой паттерн для загрузки данных:

import { ref, onMounted } from 'vue'
import api from '@/api'

export function useUsers() {
  const users = ref([])
  const loading = ref(false)
  const error = ref(null)

  const load = async () => {
    loading.value = true
    try {
      users.value = await api.get('/users').then(r => r.data)
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

  onMounted(load)

  return { users, loading, error }
}

Такой подход:

  • отделяет сетевую логику от UI
  • облегчает повторное использование
  • упрощает тестирование

Интеграция с Vuex и Pinia

Axios часто используется внутри actions:

actions: {
  async fetchUsers({ commit }) {
    const users = await api.get('/users').then(r => r.data)
    commit('setUsers', users)
  }
}

В Pinia:

actions: {
  async fetchUsers() {
    this.users = await api.get('/users').then(r => r.data)
  }
}

Axios не хранит состояние — он лишь источник данных для менеджеров состояния.

Организация API-слоя

Рекомендуемая структура:

src/
 ├─ api/
 │   ├─ index.js
 │   ├─ users.js
 │   └─ auth.js

Пример модуля:

import api from './index'

export const getUsers = () => api.get('/users')
export const getUser = id => api.get(`/users/${id}`)

Это:

  • снижает связанность
  • упрощает рефакторинг
  • повышает читаемость кода

Итоговая роль Axios в Vue-приложении

Axios выполняет роль сетевого ядра приложения, обеспечивая надежное, предсказуемое и централизованное взаимодействие с сервером. Его интеграция с Vue не требует специальных адаптеров, но грамотная архитектура API-слоя и использование перехватчиков превращают Axios в мощный инструмент для построения сложных клиентских приложений.

Оглавление