Яка різниця між 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 }; }); ```
Ключові відмінності
| Особливість | useFetch | useAsyncData |
|---|---|---|
| Ключ | Авто-генерується | Ручний обов'язковий |
| Отримання | Вбудований $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] } ); ```
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.