API-клиент: ```javascript // api/client.js import axios from 'axios' import { useAuthStore } from '@/stores/auth' import router from '@/router' const apiClient = axios.create({ baseURL: import.meta.env.VITE_API_URL || '/api', timeout: 15000, headers: { 'Content-Type': 'application/json' } }) // Request interceptor -- добавляем токен apiClient.interceptors.request.use((config) => { const auth = useAuthStore() if (auth.token) { config.headers.Authorization = `Bearer ${auth.token}` } return config }) // Response interceptor -- обработка ошибок apiClient.interceptors.response.use( (response) => response, async (error) => { if (error.response?.status === 401) { const auth = useAuthStore() auth.logout() router.push('/login') } return Promise.reject(error) } ) export default apiClient ``` Слой API-сервисов: ```javascript // api/services/users.js import client from '../client' export const usersApi = { getAll(params) { return client.get('/users', { params }) }, getById(id) { return client.get(`/users/${id}`) }, create(data) { return client.post('/users', data) }, update(id, data) { return client.patch(`/users/${id}`, data) }, delete(id) { return client.delete(`/users/${id}`) } } ``` ```javascript // api/services/posts.js import client from '../client' export const postsApi = { getAll(params) { return client.get('/posts', { params }) }, getById(id) { return client.get(`/posts/${id}`) }, create(data) { return client.post('/posts', data) }, update(id, data) { return client.put(`/posts/${id}`, data) }, delete(id) { return client.delete(`/posts/${id}`) } } ``` ```javascript // api/index.js -- единый экспорт export { usersApi } from './services/users' export { postsApi } from './services/posts' ``` Composable для GET-запросов: ```javascript // composables/useQuery.js import { ref, watchEffect, toValue, onUnmounted } from 'vue' export function useQuery(fetcher, options = {}) { const { immediate = true, initialData = null } = options const data = ref(initialData) const error = ref(null) const isLoading = ref(false) let abortController = null async function execute() { abortController?.abort() abortController = new AbortController() isLoading.value = true error.value = null try { const response = await fetcher({ signal: abortController.signal }) data.value = response.data } catch (err) { if (err.name !== 'CanceledError') { error.value = err.response?.data?.message || err.message } } finally { isLoading.value = false } } if (immediate) execute() onUnmounted(() => abortController?.abort()) return { data, error, isLoading, execute } } ``` Composable для мутаций: ```javascript // composables/useMutation.js import { ref } from 'vue' export function useMutation(mutationFn) { const data = ref(null) const error = ref(null) const isLoading = ref(false) async function execute(...args) { isLoading.value = true error.value = null try { const response = await mutationFn(...args) data.value = response.data return response.data } catch (err) { error.value = err.response?.data?.message || err.message throw err } finally { isLoading.value = false } } return { data, error, isLoading, execute } } ``` Использование в компоненте: ```vue ``` Реактивный query с параметрами: ```vue ``` --- ## 📌 Реальные кейсы 🔹 **CRUD-приложение** -- api layer + useQuery/useMutation покрывает 90% потребностей 🔹 **Дашборд** -- несколько useQuery на странице, каждый с независимым loading/error 🔹 **Форма редактирования** -- useQuery для загрузки данных + useMutation для сохранения --- ## Частые ошибки ```javascript // ❌ Запрос прямо в компоненте без абстракции onMounted(async () => { const res = await fetch('/api/users', { headers: { Authorization: `Bearer ${token}` } }) users.value = await res.json() }) // ✅ API-слой + composable const { data: users, isLoading } = useQuery(() => usersApi.getAll()) // ❌ Нет отмены запроса при unmount onMounted(async () => { const { data } = await axios.get('/api/slow') result.value = data // Компонент уже мог размонтироваться }) // ✅ AbortController в composable onUnmounted(() => abortController?.abort()) // ❌ Один loading на всю страницу const loading = ref(false) // Для всех запросов // ✅ Каждый запрос -- свой loading const { isLoading: loadingPosts } = useQuery(() => postsApi.getAll()) const { isLoading: loadingUsers } = useQuery(() => usersApi.getAll()) ``` --- ## Резюме | Слой | Ответственность | |---|---| | `api/client.js` | Axios instance, interceptors, base URL | | `api/services/*.js` | Методы для каждого ресурса | | `composables/useQuery` | GET с loading, error, refetch | | `composables/useMutation` | POST/PUT/DELETE с loading, error | | Компонент | Только UI + вызов composable | ---

{{ post.title }}

Как работать с REST API в Vue-приложении?