Работа с useFetch в Nuxt

О 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, которая и выполнит реальный сетевой запрос.