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

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

useFetch

useFetch做了一些封装,可以根据 URL 和参数自动生成密钥,根据服务器路由为请求 URL 提供类型提示,并推断 API 响应类型。

有关详细信息,请参阅Docs > API > Composables >使用 Fetch

<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技术分享原创和收集

如若转载请注明原文及出处:https://www.dsiab.com/post/f0747fbc-bcf2-4436-aa14-4c9169f70d66
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。