Получение данных в Nuxt (data fetching)

1. $fetch

Метод реализован в библиотеке ofetch

Данный метод рекомендуется использовать на стороне клиента для реакции на действия пользователя.

Не рекомендуется ипользовать $fetch в script setup, так как это приведет к двойному запросу информации, один раз на сервере, во время SSR, второй раз на клиенте во время гидрации. Это может вызвать ошибки гидрации, и увеличить время до начала взаимодействия со страницей.

<script setup lang="ts">
async function addTodo() {
  const todo = await $fetch("/api/todos", {
    method: "POST",
    body: {
      // My todo data
    },
  });
}
</script>

2. useAsyncData()

useAsyncData решает проблему двойного запроса данных. Данные запрашиваются только на сервере, во время SSR, и передаются на клиент через useNuxtApp().payload. Переданные на клиент данные используются во время гидрации и не запрашиваются второй раз.

<script setup lang="ts">
// С указанием ключа дедупликации
const { data, error } = await useAsyncData("users", () => $fetch(url));

// Без указания ключа дедупликации
const { data, error } = await useAsyncData(() => $fetch(url));
</script>

useAsyncData(key, asyncFunction, params)

key

Первым параметром может быть передан в явном виде ключ дедуплекации Если он опущен то будет сгенерирован автоматически на основе имени файла и номера строки. Рекомендуется всегда указывать этот ключ явно во избежании неопределенного поведения. Данный ключ используется на стороне клиента для выборки данных, полученых на сервере. Так же этот ключ используется для управления состоянием

asyncFunction

Асинхронная функция, которая реально получает данные, в самом простом варианте () => $fetch(url)

params

Возможные параметры:

• server: указывает, следует ли получать данные на сервере (по умолчанию true)
  Если данные не были получены на сервере, они не будут запрашиваться до завершения гидрации. Это означает, что даже если вы используете await useAsyncData на стороне клиента, данные останутся null внутри <script setup>.
• lazy: указывает, следует ли разрешать асинхронную функцию после загрузки, вместо блокировки навигации на стороне клиента (по умолчанию false)
• immediate: если установить в false, предотвратит немедленный запрос. (по умолчанию true)
• default: фабричная функция для установки значения данных по умолчанию до получения данных - полезно в сочетании с lazy: true или immediate: false
• transform: функция, которая может использоваться для преобразования данных после получения
• getCachedData: Предоставьте функцию, которая возвращает кэшированные данные. Возвращаемое значение null или undefined вызовет запрос.
  Кэширование данных происходит только при включении experimental.payloadExtraction в nuxt.config.
  По умолчанию это:
  const getDefaultCachedData = (key, nuxtApp) =>
    nuxtApp.isHydrating ? nuxtApp.payload.data[key] : nuxtApp.static.data[key];
  

• pick: выбирает только указанные ключи из полученных данных
• watch: наблюдает за реактивными источниками для автоматического обновления данных
  const page = ref(1)
  const { data: posts } = await useAsyncData(
    'posts',
    () => $fetch('https://fakeApi.com/posts', {
      params: {
        page: page.value
      }
    }), {
      watch: [page]
    }
  )
  

• deep: возвращает данные в объекте глубокого ref (по умолчанию true). Можно установить в false, чтобы вернуть данные в shallow ref, что может повысить производительность, если ваши данные не нуждаются в глубокой реактивности.
• dedupe: избегает многократного запроса одного и того же ключа одновременно (по умолчанию cancel). Возможные варианты:
  • cancel - отменяет существующие запросы при создании нового
  • defer - не делает новых запросов, если есть ожидающий запрос

Возвращаемые данные

• data: результат асинхронной функции, переданной в обработчик.
• refresh/execute: функция, которая может быть использована для обновления данных, возвращенных функцией-обработчиком.
• clear: функция, которая установит data в undefined, error в null, status в idle и отметит все текущие запросы как отмененные.
• error: объект ошибки, если получение данных не удалось.
• status: строка, указывающая статус запроса данных:
  • idle: когда запрос не начался, например: когда execute еще не был вызван и { immediate: false } установлен когда рендерится HTML на сервере и { server: false } установлен
  • pending: запрос в процессе
  • success: запрос выполнен успешно
  • error: запрос не удался

3. useFetch()

useFetch(url) очень похоже на useAsyncData(url, () => event.$fetch(url)).

<script setup lang="ts">
const { data } = await useFetch("/api/data");
</script>