Skip to main content
Практика завдань

Яка різниця між useFetch та useAsyncData в Nuxt?

Обидва composables отримують дані, але мають різні випадки використання.

useFetch - Прості API виклики

```javascript // Найпростіша форма const { data, pending, error, refresh } = await useFetch('/api/users');

// З опціями const { data } = await useFetch('/api/products', { method: 'POST', body: { category: 'electronics' }, lazy: true }); ```

useAsyncData - Повний контроль

```javascript // Кастомна логіка отримання const { data } = await useAsyncData('products', async () => { const response = await $fetch('/api/products'); return response.data.filter(p => p.active); });

// Множинні API виклики const { data } = await useAsyncData('dashboard', async () => { const [users, products] = await Promise.all([ $fetch('/api/users'), $fetch('/api/products') ]); return { users, products }; }); ```

Ключові відмінності

ОсобливістьuseFetchuseAsyncData
КлючАвто-генеруєтьсяРучний обов'язковий
ОтриманняВбудований $fetchКастомна функція
ВипадокПрості API викликиСкладна логіка
Обробка URLАвтоматичнаРучна

Реальний приклад

```javascript // useFetch - просто const { data: user } = await useFetch(`/api/users/${route.params.id}`);

// useAsyncData - складно const { data: dashboard } = await useAsyncData( `dashboard-${userId}`, async () => { const [stats, recent, notifications] = await Promise.all([ $fetch('/api/stats'), $fetch('/api/recent-activity'), $fetch('/api/notifications') ]); return { stats, recent, notifications }; }, { watch: [userId] } ); ```

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?
Практика завдань