nuxt3 数据请求

哇蓝蓝_摸鱼大队
1,348 阅读1分钟

nuxt3 数据请求

nuxt 中不需要像vue 中使用axios 来处理网络请求数据。nuxt 提供了四种方法 ：useAsyncData 、useFetch 、useLazyFetch 、useLazyAsyncData 。四种方法都可以请求数据。

$fetch()

在看上面那四个函数前， 先看一下$fetch函数

$fetch(
  url：string,// 请求路径
  options?:   // 请求的设置选项  
)

fetch的具体使用

$fetch()在nuxt 中存在服务端，和客户端两次请求的缺陷，它需要结合useAsyncData() 来进行使用。结合使用，它们可确保跨环境兼容性和高效缓存，并避免重复的网络调用。减少网络请求的次数。

useAsyncData() 的参数，

看下useAsyncData() 的参数，

function useAsyncData( 
  key: string, 
  handler: (nuxtApp?: NuxtApp) => Promise<DataT>, 
  options?: AsyncDataOptions<DataT> 
): Promise<AsyncData<DataT>>
  1. key： 传入一个唯一的键值 ,主要为了防止在多个请求出现交叉时的返回数据错乱的问题。 也可以不传，内部会自动生成一个key。
  2. handler： 异步任务处理
  3. options： 包括 lazy， default， server，pick...
  • lazy: 是否在页面加载之后再等待执行异步任务，默认为false，表示在页面加载之前会阻塞，直到异步任务执行完。
  • default: 一个工厂方法, 在异步任务还未执行完时，生成一个默认的返回的数据,
  • server: 默认为true, 表示是会在服务器去执行异步任务获取数据
  • pick: 数组类型，表示只从异步任务返回数据之前，选择指定的数据返回。
  • transform: 解析后可用于更改 handler 函数结果的函数,对返回的数据进一步处理。
  • watch: 监听数据进行更新。
  • immediate: 设置为 false 时，将阻止请求立即触发。

例子

<template>
  <div class="">
  </div>
</template>

<script setup>

const res = await useAsyncData(
  'getlist',
  () => $fetch("接口地址"),
  { lazy: falae, }
)
console.log(res);

</script>

结果，可以看到控制台的打印信息。

1691652224284.png

useFetch()

useFetch 像是 $fetch 和 useAsyncData() 的结合体。

useFetch是传两个参数，url 请求路径，options 请求的设置。

options 中的选项部分和useAsyncData() 中的选项相同，可以看看上面的内容，

  • method： 请求类型
  • query: 传参
  • params： 也是传参 至于query和params 的传参的差别，可以参考这篇文章
  • body：请求体
  • header：请求头
  • baseURL: 根路径
function useFetch( 
  url: string | Request | Ref<string | Request> | () => string | Request, 
  options?: UseFetchOptions<DataT> 
):Promise<AsyncData<DataT>>

type UseFetchOptions = { 
  key?: string 
  method?: string 
  query?: SearchParams 
  params?: SearchParams 
  body?: RequestInit['body'] | Record<string, any> 
  headers?: Record<string, string> | [key: string, value: string][] | Headers 
  baseURL?: string 
  server?: boolean 
  lazy?: boolean 
  immediate?: boolean 
  default?: () => DataT 
  transform?: (input: DataT) => DataT 
  pick?: string[] 
  watch?: WatchSource[] 
}

例子

<script setup>
const param1 = ref('value1') 
const { data, pending, error, refresh } = await useFetch(  // 结构出数据
  'https://api.nuxtjs.dev/mountains',  // url
  { // options
    query: { param1, param2: 'value2' 
  } 
})

</script>

useLazyAsyncData()

useLazyAsyncData为useAsyncData提供了一个包装器，通过将lazy选项设置为true，在处理程序解析之前触发导航。参数和useAsyncData() 一样。

useLazyFetch

useLazyFetch 供一个包装器，该包装 useFetch 器通过将选项 lazy 设置为 true 。参数和 useFetch() 一样。

avatar
文章
阅读
粉丝