```vue ``` POST, PUT, DELETE: ```javascript const { data, execute } = useFetch('https://api.example.com/users', { immediate: false // не запускать сразу }) .post({ name: 'Alice', email: 'alice@example.com' }) .json() // Вызвать вручную await execute() ``` ```javascript // PUT const { execute: updateUser } = useFetch('/api/users/1', { immediate: false }) .put({ name: 'Updated Name' }) .json() // DELETE const { execute: deleteUser } = useFetch('/api/users/1', { immediate: false }) .delete() .json() ``` Реактивный URL — рефетч при изменении: ```vue ``` Хуки beforeFetch / afterFetch: ```javascript const { data } = useFetch('/api/protected', { beforeFetch({ options }) { const token = localStorage.getItem('token') options.headers = { ...options.headers, Authorization: `Bearer ${token}` } return { options } }, afterFetch(ctx) { // Трансформация данных ctx.data = ctx.data.map((user) => ({ ...user, fullName: `${user.firstName} ${user.lastName}` })) return ctx }, onFetchError(ctx) { if (ctx.response?.status === 401) { // Redirect to login router.push('/login') } return ctx } }).json() ``` Abort и timeout: ```javascript const { abort, canAbort, isFetching, data } = useFetch('/api/slow-endpoint', { timeout: 5000 // abort после 5 секунд }).json() // Ручной abort function cancel() { if (canAbort.value) { abort() } } ``` Типизация: ```typescript interface User { id: number name: string email: string } const { data } = useFetch('/api/users').json() // data.value тип: User[] | null ``` Создание кастомного useFetch с базовой конфигурацией: ```javascript // composables/useApi.js import { createFetch } from '@vueuse/core' export const useApi = createFetch({ baseUrl: import.meta.env.VITE_API_URL, options: { beforeFetch({ options }) { const token = localStorage.getItem('token') if (token) { options.headers = { ...options.headers, Authorization: `Bearer ${token}` } } return { options } }, onFetchError(ctx) { console.error('API Error:', ctx.error) return ctx } }, fetchOptions: { mode: 'cors', headers: { 'Content-Type': 'application/json' } } }) ``` ```vue ``` ## 📌 Реальные кейсы - **Быстрый прототип** — не нужен axios. `useFetch` + `.json()` = запрос с реактивными данными за 1 строку. - **Поиск с debounce** — `useFetch(url, { refetch: true })` + `computed` URL с debouncedRef для query. Запрос отправляется автоматически при изменении поискового запроса. ## Частые ошибки ```javascript // ❌ Забыть .json() — data будет строкой, не объектом const { data } = useFetch('/api/users') console.log(data.value) // строка JSON // ✅ .json() парсит ответ const { data } = useFetch('/api/users').json() console.log(data.value) // объект ``` ```javascript // ❌ Использовать useFetch для сложных сценариев (retry, cache, pagination) // useFetch — базовый composable, не замена TanStack Query // ✅ Для сложного data-fetching — @tanstack/vue-query import { useQuery } from '@tanstack/vue-query' const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: () => fetch('/api/users').then((r) => r.json()), staleTime: 5 * 60 * 1000, // кеш 5 минут retry: 3 }) ``` ## Резюме `useFetch` — простой реактивный HTTP-клиент. `.json()` / `.text()` / `.blob()` для парсинга. `refetch: true` для автоматического рефетча при изменении URL. `createFetch` для базовой конфигурации (auth, baseUrl). Для сложных сценариев (cache, retry, pagination) — TanStack Query. ---

Как использовать useFetch из VueUse?