nuxt3中四种请求API的方法

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

• useAsyncData

• useLazyAsyncData （useAsyncData+lazy:true）

• useFetch

• useLazyFetch （useFetch+lazy:true）

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

useAsyncData

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

exportdefault {
  data() {
    return { project: 'default' }
  },
  asyncData(context) {
    return { project: 'nuxt' }
  }
}
复制代码

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

// 用法const {
  data: Ref<DataT>,// 返回的数据结果pending: Ref<boolean>,// 是否在请求状态中r