О Composables
В Nuxt есть раздел функций, которые называются Composables или составные или композиционные функции. Одной из таких функций является useFetch.
Эти функции встраиваются в функционал Nuxt и расширяют его функциональность, как правило, за счет каких-то других функций. В итоге, получается некая композиция возможностей Nuxt, с возможностями Vue и Javascript.
Подробнее о useFetch
Что собой представляет useFetch?
С этим инструментом вам придется столкнуться при работе с Server API Nuxt и работе с асинхронными функциями.
Подробнее об этом можно посмотреть в этом видеокурсе по работе с серверным API:
https://webkyrs.info/category/rabota-s-server-api-v-nuxt
На самом деле, useFetch можно рассматривать как "синтаксический сахар" для более сложной конструкции. Вызов useFetch(url) эквивалентен следующему коду:
useAsyncData(url, () => $fetch(url))
По сути, получается, что useFetch просто обертка для того, чтобы вызвать функцию $fetch (подробнее о функции $fetch см. тот же курс по Server API, ссылка выше).
useFetch не выполняет непосредственно сетевой запрос, а является хуком для вызова функции $fetch.
Таким образом useFetch используется в компонентах, чтобы перенаправить запрос на какой-то endpoint в server api части и сам непосредственно запрос не делает. В endpoint server api мы не можем использовать useFetch, там нужно использовать $fetch.
Вот простой пример использования useFetch:
<script setup> const { data: users } = await useFetch('/api/users') </script> <template> <div> <h1>Пользователи</h1> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> </template>
В этом примере useFetch отправляет запрос на server api endpoint /api/users и возвращает данные, которые мы затем отображаем в шаблоне.
Расширенные возможности useFetch
useFetch также поддерживает множество дополнительных опций для более тонкой настройки запросов:
const { data, pending, error, refresh } = await useFetch('/api/users', { method: 'POST', body: { name: 'Новый пользователь' }, headers: { 'Content-Type': 'application/json' }, lazy: true, // другие опции... })
Здесь мы видим использование метода POST, передачу тела запроса, установку заголовков и использование "ленивой" загрузки.
Таким образом useFetch один из инструментов для выполнения сетевых запросов в Nuxt, который представляет собой хук для перенаправления запросов на функцию $fetch, которая и выполнит реальный сетевой запрос.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти