Nuxt3实战系列之网络请求篇

Nuxt3提供了4种方式使得我们可以异步获取数据

• useAsyncData
• useLazyAsyncData （useAsyncData+lazy:true）
• useFetch
• useLazyFetch （useFetch+lazy:true）

4种方式中，其实核心的就是useAsyncData和useFetch。这两个方法不同于Nuxt2中的asyncData和fetch。接下来我们先来好好分析下这两个方法。

useAsyncData

我们知道，在Nuxt2中，asyncData方法类似于一个生命周期函数，它在服务端或路由更新之前被调用。方法的参数是当前页面的上下文对象，我们一般是利用 asyncData方法来获取数据并返回给当前组件，以避免请求放在客户端执行时带来的数据延迟出现问题。

export default {data() {return { project: 'default' }},asyncData(context) {return { project: 'nuxt' }}
} 

在Nuxt3中，useAsyncData可以看做是异步获取数据场景的一个封装，而且变成了一个主动调用函数，原则上可以在任何时机调用。

// 用法
const {data: Ref<DataT>,// 返回的数据结果pending: Ref<boolean>,// 是否在请求状态中refresh: (force?: boolean) => Promise<void>,// 强制刷新数据error?: any // 请求失败返回的错误信息
} = useAsyncData(key: string, // 唯一键，确保相同的请求数据的获取和去重fn: () => Object,// 一个返回数值的异步函数options?: { lazy: boolean, server: boolean }// options.lazy,是否在加载路由后才请求该异步方法，默认为false// options.server,是否在服务端请求数据，默认为true// options.default，异步请求前设置数据data默认值的工厂函数（对lazy:true选项特别有用）// options.transform，更改fn返回结果的函数// options.pick，只从数组中指定的key进行缓存
) 

从api的设计中可以看出，useAsyncData没有限制我们发起网络请求的方式，同时它还暴露了请求状态