useFetch、useLazyFetch、useAsyncData 、useLazyAsyncData的功能和区别是什么？

Nuxt 提供 useFetch、useLazyFetch、useAsyncData 和 useLazyAsyncData 来获取数据。

useFetch

<script setup>// get方式
const { data: count } = await useFetch('/api/count')// post 方式const { data: count } = await useFetch('/api/count',{methods: "post", body : {id:123} })
</script>

<template>
  Page visits: {{ count }}
</template>

useLazyFetch

useFetch的异步实现。异步函数不会阻止导航。这意味着你需要通过watch监听处理在获取数据之前的异常情况。

有关详细信息，请参阅Docs > API > Composables >使用延迟获取。

<template>
  <!-- you will need to handle a loading state -->
  <div v-if="pending">
    Loading ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>

<script setup>
const { pending, data: posts } = useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // 因为请求刚开始为空，所以获取不到数据，但是可以通过watch 方法监听
})
</script>

useAsyncData 

可以使用它来访问异步解析的数据。

您可能会问自己：两者之间有什么区别？简而言之，接收一个 URL 并获取该数据，其中可能具有更复杂的 logic.is 几乎等同于最常见的用例的开发人员体验糖。

有关详细信息，请参阅文档> API > 可组合项>使用异步数据。

// server/api/count.ts
let counter = 0
export default () => {
  counter++
  return JSON.stringify(counter)
}

// app.vue
<script setup>
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
</script>

<template>
  Page visits: {{ data }}
</template>

useLazyAsyncData 

useAsyncData 的异步实现。换句话说，异步函数不会阻止导航。这意味着您将需要处理数据所在的情况（或您在自定义工厂函数中提供的任何值）。

有关详细信息，请参阅Docs > API > Composables >使用延迟异步数据。

<template>
  <div>
    {{ pending ? 'Loading' : count }}
  </div>
</template>

<script setup>
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
  // Because count starts out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>

本文章由javascript技术分享原创和收集