Axios и HTTP

Для работы с HTTP-запросами в проектах на Vue.js и Naive UI чаще всего используют библиотеку Axios, которая предоставляет удобный интерфейс для выполнения запросов к API. Установка производится через npm или yarn:

npm install axios
# или
yarn add axios

После установки Axios можно импортировать в компоненты или создать отдельный модуль для централизованной работы с API:

import axios from 'axios';

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

export default apiClient;

Создание экземпляра apiClient позволяет задавать общие настройки, которые будут применяться ко всем запросам, включая базовый URL, таймаут и заголовки.

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

GET-запросы применяются для получения данных с сервера:

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

POST-запросы отправляют данные на сервер:

apiClient.post('/users', {
  name: 'Иван',
  email: 'ivan@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Ключевой момент: Axios автоматически сериализует объект JavaScript в JSON и устанавливает соответствующий заголовок Content-Type: application/json.

Работа с асинхронными функциями

Для интеграции с современным синтаксисом Vue 3 удобно использовать async/await:

async function fetchUsers() {
  try {
    const response = await apiClient.get('/users');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

Использование async/await упрощает обработку ошибок и делает код более читаемым, особенно при последовательных запросах.

Настройка перехватчиков (interceptors)

Axios поддерживает перехватчики запросов и ответов, что позволяет централизованно обрабатывать токены, логирование или обработку ошибок:

// Перехватчик запросов
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => Promise.reject(error));

// Перехватчик ответов
apiClient.interceptors.response.use(response => response, error => {
  if (error.response && error.response.status === 401) {
    console.error('Неавторизованный доступ');
  }
  return Promise.reject(error);
});

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

Интеграция с Naive UI

В Naive UI часто требуется отображение данных из API в компонентах, таких как DataTable, Select или Card. Например, для динамического списка пользователей в n-data-table:

<template>
  <n-data-table :columns="columns" :data="users" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import apiClient from './apiClient';

const users = ref([]);
const columns = [
  { title: 'Имя', key: 'name' },
  { title: 'Email', key: 'email' }
];

onMounted(async () => {
  try {
    const response = await apiClient.get('/users');
    users.value = response.data;
  } catch (error) {
    console.error(error);
  }
});
</script>

Важно, что ref используется для реактивного хранения данных, а Naive UI автоматически реагирует на их изменение.

Обработка ошибок и уведомления

Naive UI предоставляет компонент n-notification для отображения сообщений пользователю. При интеграции с Axios это позволяет удобно информировать о результатах запросов:

import { useNotification } from 'naive-ui';
const notification = useNotification();

try {
  const response = await apiClient.post('/users', newUser);
  notification.success({
    title: 'Успех',
    content: `Пользователь ${response.data.name} добавлен`
  });
} catch (error) {
  notification.error({
    title: 'Ошибка',
    content: error.response?.data?.message || 'Не удалось выполнить запрос'
  });
}

Таким образом, Axios и Naive UI работают в связке: Axios отвечает за получение и отправку данных, Naive UI за визуализацию и информирование пользователя.

Параллельные запросы и Promise.all

Часто необходимо выполнять несколько запросов одновременно. Axios позволяет использовать Promise.all:

const [usersRes, postsRes] = await Promise.all([
  apiClient.get('/users'),
  apiClient.get('/posts')
]);

console.log(usersRes.data, postsRes.data);

Такой подход экономит время и уменьшает задержки, особенно при работе с множеством независимых ресурсов.

Настройка таймаутов и отмена запросов

Для контроля производительности и предотвращения долгих зависаний можно использовать таймауты и AbortController:

const controller = new AbortController();

try {
  const response = await apiClient.get('/users', {
    signal: controller.signal,
    timeout: 3000
  });
  console.log(response.data);
} catch (error) {
  if (error.name === 'CanceledError') {
    console.warn('Запрос отменён');
  } else {
    console.error(error);
  }
}

// Отмена запроса через 2 секунды
setTimeout(() => controller.abort(), 2000);

Это важно для интерфейсов, где пользователь может быстро переключаться между страницами или компонентами.

Заключение по архитектуре взаимодействия

При работе с Axios и Naive UI рекомендуется:

  • Создавать отдельный модуль для API (apiClient.js) с базовым URL и перехватчиками.
  • Использовать async/await для упрощения логики асинхронных операций.
  • Интегрировать уведомления Naive UI для обработки успехов и ошибок.
  • Применять реактивные структуры (ref, reactive) для динамического обновления компонентов.
  • Рассматривать возможность параллельных запросов и отмены при необходимости.

Эти подходы позволяют построить стабильную и масштабируемую архитектуру фронтенда, где HTTP-запросы управляются централизованно, а визуальная часть компонента полностью интегрирована с Naive UI.

Оглавление