Nuxt3 数据请求 useAsyncData/useFetch

原创

KID.

修改于 2023-10-30 14:37:51

2.5K0

修改于 2023-10-30 14:37:51

文章被收录于专栏：Coooooooooode！（前端）Coooooooooode！（前端）

配置SSR

Nuxt3 默认首屏SSR，由服务端渲染，可以通过配置 ssr:false 来取消服务端渲染

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
 // ssr:false, //页面全部为客户端渲染
  routerRules:{ // 指定路由页面为客户端渲染
      '/home': {
          ssr:false
      }
  }
})

数据请求

根据vue 的声明周期，只有 setup beforeCreate Created**里的内容会在服务端执行，所以如果是首屏服务端渲染时，需要将获取数据方法写到这几个生命周期之中**

Nuxt3 有封装好的$fetch方法做数据请求，可以不需要引入第三方axios或者fetch做数据请求，可能会出现多个请求数据混乱问题

下列情况都是不需要跨域的请求，服务端和客户端不需要做其他配置代理就可以请求的内容

useAsyncData && useLazyAsyncData

useAsyncData 需要结合 $fetch 来使用，且要传入一个唯一的key值，防止请求过多数据混乱，lazy默认为false ，会在从别的页面跳转进来时阻塞路由跳转 即：需要先请求完后路由才会切换

useLazyAsyncData 的lazy默认为true 不需要再额外写配置

<template>
  <div>
    <div v-for="item of list" :key="item.name">
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([])
const { data } = await useAsyncData(
  'id', // 需要输入唯一ID
  () =>
    $fetch('https://xxx.xxx.com', {
      headers: {
        ...
      }
    }),
  {
    pick: ['data'], // 选择返回对象中想要的属性
    // lazy: false, // 这里默认为false 会阻塞路由渲染，（一定要等到数据请求回来后才会跳转路由）
    lazy: true // 不会阻塞路由跳转，但是会导致跳转后无数据，需要通过watch监听数据后赋值
  }
)
 // 不可以去掉，否则首屏加载会报错
list.value = data.value
watch(data, () => {
  list.value = data.value
})
</script>

这里获取数据最开始是空数组，请求数据后将内容赋值，使用lazy后会导致最开始数据没有，进入页面请求数据不加载，这里可以使用 watch监听返回内容，改变时赋值。

也可以不做赋值处理，直接将取出的内容解构用于页面渲染，就可以不需要监听

<template>
  <div>
    <div v-for="item of data" :key="item.name">
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">

const { data } = await useAsyncData(
  'id', // 需要输入唯一ID
  () =>
    $fetch('https://xxx.xxx.com', {
      headers: {
        ...
      }
    }),
  {
    pick: ['data'], // 选择返回对象中想要的属性
    // lazy: false, // 这里默认为false 会阻塞路由渲染，（一定要等到数据请求回来后才会跳转路由）
    lazy: true // 不会阻塞路由跳转，但是会导致跳转后无数据，需要通过watch监听数据后赋值
  }
)

</script>

useFetch && useLaztFetch

相当于useAsyncData的语法糖，不需要写$fetch也不需要传入唯一id

useLaztFetch 就是默认将lazy设置为true ，

写法相对简单

const { data } = await useFetch(
  'https://xxx.xxx.com',
  {
    headers: {
     ...
    },
    transform: (res: any) => res.data.films, // 返回内容过多可以筛选 想要的返回内容
    // lazy: false, // 这里默认为false 会阻塞路由渲染，（一定要等到数据请求回来后才会跳转路由）
    lazy: true // 不会阻塞路由跳转，但是会导致跳转后无数据，需要通过watch监听数据后赋值
  }
)

</script>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

nuxt.js